Open johnhbenetech opened 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)
Footer:
@jscholes Any issues with the above?
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.
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.
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.
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.
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)
Footer: