WCAG 2.1 – Criterion 1.4.3 – Minimum Contrast (Level AA)

Contrast is the next criterion we’re discussing today!

This principle concerns the contrast of content placed on websites (as opposed to criterion 1.4.11, which pertains to the contrast of non-text elements). Its aim is to ensure that individuals with visual impairments or other disabilities affecting color perception can read and comprehend text on websites. WCAG Criterion 1.4.3 also recommends that text contrast be adjustable to User settings. This means that if a User adjusts contrast settings on their device, the website should respond to these changes and provide appropriate text legibility.

Now, for specifics. What contrast ratio is designated as the minimum?

For text of standard size (up to 18.5 pixels or equivalent size):

• Minimum contrast for normal text: 4.5:1.
• Minimum contrast for bold or larger text: 3:1 (due to increased font legibility).
  For larger text (over 18.5 pixels or equivalent size):
• Minimum contrast for normal or bold text: 3:1.

Are there any exceptions? Yes. Typically decorative texts, inactive user interface elements, or logos do not need to meet the contrast criterion. Would it be better if they did? Certainly.

Now for an interesting fact about the color orange (to be addressed in WCAG 3.0).
The author presents two buttons – one orange with black font (meeting contrast) and the other – orange with white font (not meeting contrast). Which one seems more eye-friendly? Surprisingly, according to research and our own observations, the latter. Read on.