Enter a detailed explanation of the issue you found in our content. If possible, recommend a fix to the problem.

The WebAIM guidelines recommend an AA (minimum) contrast ratio of 4.5:1 for all text. There are exceptions for very large text (120-150% larger than the default body text), for which the ratio can go down to 3:1. Notice the difference in the contrast ratios shown here:

These are not “WebAIM guidelines”, the guidelines that WebAIM links to are the Web Content Accessibility Guidelines (WCAG) 2.0. They do not recommend contrast ratios. They require a 4.5:1 contrast ratio. Large text is not defined as “120-150% larger than the default body text” but as 14pt/18.6px and bold or 24px in size. The “ratio” cannot go down to 3:1 in that case, but for text at that size a lower ratio of 3:1 is required.

20/40 is commonly reported as the typical visual acuity of people at about age 80.

I couldn’t find any evidence of this. I also think it’s not needed to justify these minimum ratios.

For users with low vision impairments or color deficiencies, we can increase the contrast up to 7:1 for body text.

I think this comes from the “rationale for ratios chosen” from the WCAG Understanding document, but that’s not what is referred to there. The 4.5:1 ratio is already a minimum for low vision or CVD users. 7:1 only comes into play at WCAG level AAA, which makes this unnecessary complicated.

And yes, you can increase the contrast from minimums. but there is no recommendation for an “optimal contrast ratio”.

Compared to AA and AAA guidelines, APCA is more context-dependent.

The contrast is calculated based on the following features:

Spatial properties (font weight and text size) Text color (perceived lightness difference between text and background) Context (ambient light, surroundings, and intended purpose of the text)

As far as I’m aware, APCA currently uses only text and background color to determine the contrast values and gives suggestions for where to use a color and how large it needs to be in different font-weights. The contrast is calculated first and based on the contrast value, the tool recommends font-weights and where to use the font.

Chrome includes an experimental feature to replace the AA/AAA contrast ratio guidelines with APCA.

This tool (AFAIK) only calculates the contrast ratio but does not easily provide the lookup table that is linked from the linked DevTools announcement, removing some usefulness.

The WebAIM checklist states in section 1.4.1 that "color should not be used as the sole method of conveying content or distinguishing visual elements."

The WCAG standard in 1.4.1 Use of Color says the same thing with the same words (only without the weasel word “should”, as not doing it is a requirement):

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

The form example also needs to follow best practices like visual labels.

High-contrast mode lets a user invert foreground and background colors, which often helps text stand out better. For someone with a low vision impairment, high-contrast mode can make it much easier to navigate the content on the page.

That feature is inverted color. Windows High Contrast Mode/Color Themes or Increase Contrast settings are different. It’s not super useful to conflate the two.

Enter a URL, to the relevant page on web.dev.

https://web.dev/articles/color-and-contrast-accessibility

This report was made possible by my supporters. I thank them very much.