Making website color palette more accessible for color blind/low vision people

[Ethanwang17]

Design Proposal ---

What's the problem?

This request would accomplish the goal of making the WordPlayPen website more accessible to low-vision and colorblind users, since the current color scheme for the website is not accessible to low vision and colorblind users. When low-vision or colorblind users log onto the website, they may experience difficulty reading the text since the color palette of the general interface design does not have high enough contrast.

The current website color palette (specifically the yellow color against the white background, gray on white, and gray on black) does not meet WCAG 2.1 guidelines, as shown in the screenshots in the big report below.

What's the design idea?

Our idea is to make small changes to the current color palette of the WordPlayPen interface design. Not the colors of the icons and images used throughout the website, but the main foreground and background colors that are carried out throughout the design of many of the WordPlayPen pages. We were not able to find yellow/orange colors that passed the CCA (Color Contrast Analyzer) tests with a white background, so we shifted towards a blue/white/gray/black color palette instead. It is a big visual change, but the main change is that we are shifting towards blue instead of yellow. Below are screenshots of the color palettes and how they pass the tests:

Colors for Light Mode: FFFFFF 313338 A8C1FF C2C2C2

Colors for Dark Mode: 000000 FFFFFF 385599 5A5858

Bug Report ----

Expected behavior

The color contrast ratios should be at least 7:1 for low vision users and 4.5:1 for color blind users so that readability is made more accessible.

Actual behavior

The current color scheme for the WordPlayPen website is not accessible to low vision and colorblind users. The screenshots below indicate the current contrast ratios for the various colors used on the existing website.

Screenshots

We ran the website through a color analyzer that specifically checks for accessibility to low vision and color blind individuals. The images below show which colors currently fail and which ones don’t.

Environment

Macbook Pro 16” 2021 OS 14.0 Macbook Pro 13" 2022 OS 12.4

[amyjko]

Thanks for reporting @Ethanwang17! A few notes:

• This is a bug report, not an enhancement. Accessibility is non-negotiable, so any deviation from it is a bug. Can you convert this to use the bug report template instead of the enhancement template?
• When you convert it to a bug report, please include precise details of exactly which colors you are reporting violate accessibility contrast requirements. You can use tools like WebAIM to check for poor contrast. (I've used these tools already on the colors chosen and did not find violations, but maybe you're using a different tool?)
• When you convert this to a bug report, please report the device you were using, as all screens have different color contrast ratios that effect contrast. That will help whoever works on this know the worst case you're working with.

[RuweydaAbdi]

looking at this issue myself, I've been working on including environmental themes for the website. I was doing some research on this topic to make my themes more inclusive for low vision and colorblindness. It's still a working progress playing around with the rgb settings. (This issue is somewhat similar issue to mine, but would actually help me a lot if I had other contributors to work on this issue so I can focus more on my issue, the overall themes) Please @ me or talk to me in person when coming up with your color palette (that Amy approves, or whatever is already currently in discussion) so that I could include it in my design proposals.

Also, keep in mind (something that I learned through my research). Chosen colors may not show as vibrant/ intended on different devices. contributors to this issue, I think it would be good to open up your palette (same) on a macbook, and a different type of laptop asus, dell, ect look at it side by side. Then compare and think about how the colors you chose may affect low/high vision and colorblindness. I can talk about this more with you all.

[amyjko]

Thanks for adding these insights @RuweydaAbdi! It looks like @Ethanwang17 hasn't replied to my comments yet. Hopefully they can reply to you too when they get around to it.

[RuweydaAbdi]

no problem! I know there are other contributors working on this issue, I hope we could talk a bit later in person today! And talk about any color palettes already in the making from their or on my side as well.

[Ethanwang17]

Hi there. I will be in class today so hopefully we can discuss this in person

[maansi-s]

Hi @amyjko! We updated the description with the new bug report and are working on developing a color palette that will satisfy the color contrast needs to be considered accessible.

[maansi-s]

@amyjko triage please!

[maansi-s]

@amyjko We are ready for design approval! Thank you.

[amyjko]

@maansi-s Can you point me to your design proposal? I'm having trouble understanding the organization of your report. There now seems to be an enhancement request and a bug report in the description. The bug report should remain, and you should just add a section at the bottom with the header "Design Specification", and then specify your design.

If the section you're referring to is the "What's the design idea?" section at the top, then here is my feedback:

• I can't tell which colors you're proposing and which colors they're replacing. See the colors defined in app.html for a reference of the current palette, and be precise about which changes you are proposing.

• The color palette you proposed seems to be dramatically different from the current palette. I believed we discussed minor changes; all of the current palette seems to be gone, if I'm understanding the proposal correctly.

[meepsterleapster]

Hey I am pushing issue #400. This will affect the pallet by changing the color --dark-grey for headers from #999999 to #595959. This will be a fix for this issue for subtitles. It also maintains a relatively similar pallet as the current grey.

[amyjko]

It's the end of Winter! Please provide an update on this issue, including:

• Whether you plan to continue work on it
• If you do not, 1) provide a detailed update of its status, 2) add any unfinished work, 3) list any any unmerged branches, and 4) unassign yourself, so someone else can take over the task. Please leave the issue in better shape than you found it, helping future contributors to start from where you left off.

If you do plan to continue work on it, carry on. Otherwise, thank you for your contributions!

[amyjko]

No reply, unassigning @Ethanwang17, @maansi-s, @mayalukalapu.

[iamvivian03]

Colors for Dark Mode:

background: #000000 (current) text:

FFFFFF(main/body text, current),

FE6100(current),

0099FC

current didn't pass text(AAA):

*logo: #757674 (same as light mode)

current didn't pass color test:

Colors for Light Mode:

*background: #FFFFFF(current)

*text: don't need to change

*logo: #757674 (same as dark mode)

[amyjko]

@iamvivian03 Can you please clarify your comment? What are you sharing, what does it mean, and how is it related to this issue? (Every comment you post should be explicit and detailed: others need to be able to read your comment and know what it means, based only on what you've posted).