search

benetech / MathShare

MIT License
9 stars 3 forks source link

UI recommendation for 'beta' pill in header, also font color of footer text #846

Open johnhbenetech opened 4 years ago

johnhbenetech commented 4 years ago

These two elements don't pass contrast tests. Can you suggest different coloring schemes that pass?

[Alex edit] Update to contain scoping:

Font color for the beta "pill" and the and the footer should be updated to be at least 7:1 contrast.

Beta "pill" in header: dark blue (#0256B4) on white (#FFFFFF)

Mathshare logo with the beta designation in a small white oval on its right. The beta text is in normal-sized font, not bolded.

Footer:

Universal footer showing the IDEAS that work logo and accompanying U.S. Department of Ed paragraph in dark gray on the same white background as the rest of the site. Below is the darker ribbon with links and copyright info displayed in white. Both are small font, not bolded.
alexrcabral commented 4 years ago

Font color for the beta "pill" and the and the footer should be updated to be at least 7:1 contrast.

Beta "pill" in header: dark blue (#0256B4) on white (#FFFFFF)

Mathshare logo with the beta designation in a small white oval on its right. The beta text is in normal-sized font, not bolded.

Footer:

Universal footer showing the IDEAS that work logo and accompanying U.S. Department of Ed paragraph in dark gray on the same white background as the rest of the site. Below is the darker ribbon with links and copyright info displayed in white. Both are small font, not bolded.
alexrcabral commented 4 years ago

@jscholes Any issues with the above?

Sanjog1605 commented 4 years ago

The header/banner region is good and has sufficient color contrast. I noticed that WCAG level AAA guidelines are followed with respect to the color contrast. The problem lies in the footer region.

Background Color Issue of the Footer Region

I have found one issue actually, and this issue is not allowing me to go further with my testing. Actually, the problem is that it is very difficult to differentiate between the content in main landmark and the content under the footer landmark, because there is no visible (in terms of low vision) differentiation or color contrast apart from the content itself.

Some area of main landmark and the footer region

Possible Solution

One can give a similar background color as in the header/banner region, which is dark blue (#00008B). So, the background color can be dark blue and the text color can be white (#FFFFFF). This will make the differentiation of the banner, main, and footer content much more easier for not only persons with low vision but also for persons with learning disabilities as well as cognitive disabilities.

Additional Comment

Contrast plays an important role in making the website accessible for a wide range of disabilities and also for persons with no disability. Before dealing with the contrast issues of footer region, I would like to acquaint you with my vision. I am also a low vision. I will not be able to comment on certain contrast cases, especially those which involves a lot of color. However, I can point out the major issues when it comes to contrast. I can also differentiate between colors. For example, I can differentiate dark blue from light blue. This is just to give you an idea of my vision.

I can check the rest of the issues in the footer region if any, once the color is changed.