search

CityOfBoston / Iterators

Repo to host files and manage issue tracking and QA tetsing.
0 stars 0 forks source link

Some of the text on the screen does not have sufficient contrast with the background color of the site #135

Closed ollie-iterators closed 3 years ago

ollie-iterators commented 4 years ago

Screengrab/videos (insert file names here) 2020 08 21, Color Contrast Bug.mp4 2020 08 21, Color Contrast Bug.mp4.zip

Link https://d8-stg.boston.gov/

Node # (if known) 21

Type of User: Anonymous

Environment (Device > OS > Browser) Computer > MacOS 10.15.6 > Chrome 84

Trusted Tester Test Color Contrast

Brief Description Some of the text on the screen does not have sufficient contrast with the background color of the site

Steps to reproduce 1) Go to the link described 2) 00:00 The areas with color contrast alerts are:

Desired Result • The text has sufficient contrast with the colors behind the text

Actual Result • There are 26 areas that have insufficient contrast with the color of the area behind it

subaha-cob commented 4 years ago

@andrebtlima This ticket will need a larger discussion with Sebastian's team.

ollie-iterators commented 4 years ago

There are other similar issues on these links:

Note: The bugs for the Death and Marriage links are the same as the areas found in the screen captures for the Birth link

The areas on the page that had color contrast alerts were:

subaha-cob commented 4 years ago

@andrebtlima I cannot work on this ticket alone without Sebastian's input. We need to have a discussion with him first. Currently we have over 60 color alerts. With at least 28 out right FAIL. And they are not just on one thing but several places on the website.

subaha-cob commented 3 years ago

@sebastianebarb what is the status of this? Can we swap out the contrast color to be #828282 instead? It is currently #d2d2d2.

sebastianebarb commented 3 years ago

Great question, This was assigned to me along with a host of other tickets and was not prioritized so I had not looked at it. Last I had spoken to Andre I thought colors needed to be updated via the update Jess had worked on. Lets grab some time to get it right.

subaha-cob commented 3 years ago

I wasn't aware Jess updated some colors. Although I saw some color changes in the style that was made after the initial design. But we are still having color issues and it maybe that her changes didn't cut across the website or was not fully implemented yet.

This will definitely be a great time to seat and chat about it. I can actually implement all the colors changes once we decided what they should.

subaha-cob commented 3 years ago

@sebastianebarb these are the colors we are using for the main headers and the main body text. headers - Charles blue color: #091f2f body - Dark grey color: #58585b

I have managed to change everything on Patterns to reflect those main colors. But, there are still some lone pages that either have hard coded styles or are calling a class that is overriding the main class. We should hopefully find those pages during testing and fix them as well.

Otherwise I am just waiting for the changes for the Optimistic blue text on Charles blue background to fix the last piece of color contrast issues we are having. We are not changing 311 background/text until after their launch/re-brand to reflect their new colors.

All updates are on UAT in case you want to check it out. https://d8-uat.boston.gov/

sebastianebarb commented 3 years ago

Hey Stella,

this Hex will work on the dark blue

28A7DF

On Thu, May 6, 2021 at 9:46 AM Stella Ubaha @.***> wrote:

@sebastianebarb https://urldefense.com/v3/__https://github.com/sebastianebarb__;!!P1kzyTyo9g!xuzcNN3sssDxjXk-EJOP7eHaNFB2SE8pBRMWEwGOyLuQJWRvkuS4gmU7Ukw_8PJUD3lKREg$ these are the colors we are using for the main headers and the main body text. headers - Charles blue color: #091f2f body - Dark grey color: #58585b

I have managed to change everything on Patterns to reflect those main colors. But, there are still some lone pages that either have hard coded styles or are calling a class that is overriding the main class. We should hopefully find those pages during testing and fix them as well.

Otherwise I am just waiting for the changes for the Optimistic blue text on Charles blue background to fix the last piece of color contrast issues we are having. We are not changing 311 background/text until after their launch/re-brand to reflect their new colors.

All updates are on UAT in case you want to check it out. https://d8-uat.boston.gov/

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://urldefense.com/v3/__https://github.com/CityOfBoston/Iterators/issues/135*issuecomment-833535666__;Iw!!P1kzyTyo9g!xuzcNN3sssDxjXk-EJOP7eHaNFB2SE8pBRMWEwGOyLuQJWRvkuS4gmU7Ukw_8PJUgEoB72E$, or unsubscribe https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/AE5PT65Q5BNWEKCM4PONDDTTMKMRVANCNFSM4QHO53SA__;!!P1kzyTyo9g!xuzcNN3sssDxjXk-EJOP7eHaNFB2SE8pBRMWEwGOyLuQJWRvkuS4gmU7Ukw_8PJUceRpGo8$ .

--

Sebastian Ebarb (pronouns he/him/his)

Design Director for the City of Boston

Department of Innovation & Technology

www.boston.gov/digital

You can check out www.boston.gov/brand http://www.boston.gov/brand for all your BOSTON brand needs. You can sign up for design/Canva class here http://Boston.gov/canva, and you can also see samples of our work at boston.gov/design-portfolio http://boston.gov/design-portfolio.

subaha-cob commented 3 years ago

@david-iterators This is all set now. Should be ready to test on UAT in 2 hours. https://d8-uat.boston.gov/

subaha-cob commented 3 years ago

@david-iterators and @jill-iterators, @ollie-iterators We are waiting on you to verify so that we can move this to production please. Thanks! https://d8-uat.boston.gov/

david-iterators commented 3 years ago

Screengrab/videos (insert file names here) https://www.loom.com/share/ee4244218eb44bf6902cbde4e1043d27 2021 05 12, Main Page has color contrast issues, Main button text.png 2021 05 12, Main Page has color contrast issues, Help 311 link.png

Link https://d8-uat.boston.gov/

Node # (if known)

Type of User: Anonymous

Environment (Device > OS > Browser) Computer > MacOS 11.3.1 > Chrome 90

Trusted Tester Test Color Contrast

Brief Description There are elements on the main page with color contrast issues

Steps to reproduce 1) 00:01, Load the URL 2) 00:02, Click on the Hamburger Menu a) 00:04, Bug: The Help / 311 button has color contrast issues 3) 00:11, Click on the closing sidebar menu button 4) 00:13, Inspect the Menu text on the Hamburger menu button a) 00:13, Bug: The Menu text on the Hamburger menu button has color contrast issues

Desired Result • No elements have color contrast issues

Actual Result • 2 elements have color contrast issues:

o The Help / 311 sidebar menu button (1 element with color contrast issues)  See 2021 05 12, Main Page has color contrast issues, Help 311 link.png • Information: o Contrast Ratio: 1.77 o Needs to be: 4.5 o Text Color: #FFFFFF o Background: #FCB61A o Suggested Background: #AC6600

o The Menu text in the hamburger menu button (1 element with color contrast issues)  See 2021 05 12, Main Page has color contrast issues, Main button text.png • Information: o Contrast Ratio: 3.36 o Needs to be: 4.5 o Text Color: #FFFFFF o Background: #FB4d42 o Suggested Background: #E03227

2021 05 12, Main Page has color contrast issues, Main button text 2021 05 12, Main Page has color contrast issues, Help 311 link

subaha-cob commented 3 years ago

@sebastianebarb and @carolinestj are you opposed to changing the color of the date flag on Events to #091f2f? See image below please. We were still having contrast issues with those though inconsistent. image

Also changing the menu toggle background-color to #d22d23. image

carolinestj commented 3 years ago

@subaha-cob @sebastianebarb

I think we should keep the optimistic blue if we can since it's more attention catching than the dark blue.

Not sure why the date flag would have contrast issues with the optimistic blue background and Charles river blue for the text since that has been approved before.

Is it maybe the the outline on the flag that's not thick enough maybe?

subaha-cob commented 3 years ago

@carolinestj The optimistic blue on white is fine. It flag that is having issues. The date is currently a white color and failing contrast test that is why I was suggesting the Charles river color for it instead.

carolinestj commented 3 years ago

@subaha-cob @sebastianebarb oh sorry I thought the screenshot was what it looked like now, my bad! Yes Charles blue is much better option!

subaha-cob commented 3 years ago

@carolinestj and @sebastianebarb the one pending color contrast is the 311 background in the side menu. I know you mentioned that it will be changed once the new colors for 311 are approved. I just wanted to keep it in your radar. See below for more infor. Thanks!

The Help / 311 sidebar menu button (1 element with color contrast issues) See image above. • Information: o Contrast Ratio: 1.77 o Needs to be: 4.5 o Text Color: #FFFFFF o Background: #FCB61A o Suggested Background: #AC6600

sebastianebarb commented 3 years ago

Hey Stella,

If we swap the background to Charles River Blue #091F2F and make the text

FCB61A we should be good according to the contrast checker I just tried.

On Fri, May 14, 2021 at 2:54 PM Stella Ubaha @.***> wrote:

@carolinestj https://urldefense.com/v3/__https://github.com/carolinestj__;!!P1kzyTyo9g!2InIZO3cZM-TsMgRg_nfC2Git5mRNGPGl6snSKJkHaWvjLUtE1cozBFS3ieAKVNkjyn4m7Y$ and @sebastianebarb https://urldefense.com/v3/__https://github.com/sebastianebarb__;!!P1kzyTyo9g!2InIZO3cZM-TsMgRg_nfC2Git5mRNGPGl6snSKJkHaWvjLUtE1cozBFS3ieAKVNkcDFJ8Sg$ the one pending color contrast is the 311 background in the side menu. I know you mentioned that it will be changed once the new colors for 311 are approved. I just wanted to keep it in your radar. See below for more infor. Thanks!

The Help / 311 sidebar menu button (1 element with color contrast issues) See image above. • Information: o Contrast Ratio: 1.77 o Needs to be: 4.5 o Text Color: #FFFFFF o Background: #FCB61A o Suggested Background: #AC6600

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://urldefense.com/v3/__https://github.com/CityOfBoston/Iterators/issues/135*issuecomment-841437651__;Iw!!P1kzyTyo9g!2InIZO3cZM-TsMgRg_nfC2Git5mRNGPGl6snSKJkHaWvjLUtE1cozBFS3ieAKVNkmJzek6Q$, or unsubscribe https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/AE5PT63CJUK7OSIOAYWWOVDTNVWV7ANCNFSM4QHO53SA__;!!P1kzyTyo9g!2InIZO3cZM-TsMgRg_nfC2Git5mRNGPGl6snSKJkHaWvjLUtE1cozBFS3ieAKVNki1r0CoY$ .

--

Sebastian Ebarb (pronouns he/him/his)

Design Director for the City of Boston

Department of Innovation & Technology

www.boston.gov/digital

You can check out www.boston.gov/brand http://www.boston.gov/brand for all your BOSTON brand needs. You can sign up for design/Canva class here http://Boston.gov/canva, and you can also see samples of our work at boston.gov/design-portfolio http://boston.gov/design-portfolio.

subaha-cob commented 3 years ago

@david-iterators This is now on UAT for testing.

ollie-iterators commented 3 years ago

Verified on UAT