Skip to content
InsideUX Design

UX glossary · engl. Contrast Ratio

Contrast Ratio

The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text.

Imagine you’re waiting at a bus stop on a sunny day and want to check on your phone when the next bus arrives. The app shows departure times in light gray on a white background. You squint, tilt the screen, shade it with your hand. The bus is gone before you can read the number.

The problem isn’t the font size. It’s the contrast ratio.

Explained simply

The contrast ratio tells you how much two colors differ in brightness, usually text and its background. It doesn’t measure hue, but what’s called relative luminance: how bright a color appears to the human eye. The result is a value between 1:1 (no difference, like white on white) and 21:1 (black on white).

Think of chalk: on a dark blackboard, it’s easy to read. The same chalk on a light gray concrete wall almost disappears. The writing is identical. Only the difference in brightness is missing.

The key thresholds

The WCAG set fixed minimum values:

  • 1.4.3 Contrast (Minimum), Level AA: Normal text needs at least 4.5:1. Large text (18 point and up, or 14 point bold, roughly 24 and 18.5 CSS pixels) needs at least 3:1.
  • 1.4.6 Contrast (Enhanced), Level AAA: 7:1 for normal text and 4.5:1 for large text.
  • 1.4.11 Non-text Contrast, Level AA: Interface controls and meaningful graphics need at least 3:1 against their surroundings, such as the border of an input field or a focus indicator.

These values are hard thresholds. A result of 4.49:1 isn’t rounded up and doesn’t meet 4.5:1. Exceptions include logos, purely decorative elements and disabled controls.

An example

Here’s an example: an online form uses the gray #999999 on white for its help text. That’s about 2.8:1, which fails at normal text size. The input borders are #DDDDDD, around 1.4:1. Many people can barely tell where to click.

After the redesign, the help text uses #767676 (about 4.5:1, just passing AA) and the field borders get a mid gray above 3:1. The design still feels calm, but far more people can read it.

Why it matters

Low contrast is the most common automatically detected issue on the web. According to the 2026 “WebAIM Million,” about 83.9 percent of the home pages tested had text below the WCAG AA thresholds. This doesn’t only affect people with low vision. It affects anyone reading in bright sunlight, on an old screen or with tired eyes. Why contrast is still only one piece of the puzzle is covered in Why Accessibility Is More Than Contrast and Font Size.

In practice

  • Measure instead of guessing. Your eyes can fool you. The WebAIM Contrast Checker instantly shows the ratio and the AA and AAA results for any two colors.
  • Define approved color pairs. Record allowed combinations of text and background colors right in your design system, so nobody has to recalculate every time.
  • Don’t forget the states. Also check placeholders, error messages, focus indicators and text on images. That’s where weak contrast fails most often.

Related terms

Accessibility, WCAG, Color Vision Deficiency, Design System

Sources

More terms

Full glossary