Color Contrast Math: Readability and Ratio

Learn the mathematical rules and contrast ratios required by WCAG to ensure your interface design is legible for people with low vision and color blindness.

info Quick Definition
Color Contrast is the difference in luminosity between the text (foreground) and the background. WCAG 2.1 accessibility guidelines establish specific mathematical contrast ratios (e.g., 4.5:1) that must be met for content to be readable by as many people as possible.

Why the Designer Must Know Color Math?

Designing only for “what looks good” on your high-end 5K monitor is a dangerous trap. A large portion of the world’s population has some form of visual impairment or uses their devices under direct sunlight.

If the contrast between text and background is insufficient, the information becomes invisible to these people. Contrast math is not a limit to your creativity; it is the guarantee that your messages will reach everyone.

The 2 WCAG Success Standards

Depending on the level of accessibility you seek (AA or AAA), the mathematical rules change:

1. Level AA (The Industry Standard)

It is the minimum level required by most modern laws and corporate identity manuals.

  • Normal Text (less than 18pt): Minimum ratio of 4.5:1.
  • Large Text (over 14pt / 18.5px bold or 18pt / 24px): Minimum ratio of 3:1.
  • UI Components and Graphics: Minimum ratio of 3:1 (for input borders, icons, etc.).

2. Level AAA (Maximum Accessibility)

A level of excellence reserved for public, medical, or high-security products.

  • Normal Text: Minimum ratio of 7:1.
  • Large Text: Minimum ratio of 4.5:1.

How Contrast Ratio is Calculated

You don’t need to do the math by hand, but it’s useful to know that the ratio is based on the relative luminance of colors. It is measured on a scale from 1:1 (same color) to 21:1 (pure white against pure black).

  • White on white has a ratio of 1:1.
  • Black on white has the maximum ratio of 21:1.

Any color combination you choose will fall somewhere on this scale.

Essential Tools in Your Workflow

Don’t guess the contrast; use it as part of your design in Figma or the browser:

  • Figma Plugins (Contrast, Stark): Allow you to check the ratio while designing each component. Some even automatically suggest the closest color that meets the standard.
  • Chrome DevTools: Within the element inspector, if you click on the color of a text, the browser itself will tell you if it meets AA or AAA levels with a small checkmark.
  • Leonardo.io: One of the best tools for creating color palettes based on real contrast ratios, very useful for design systems.

The Special Case of Color Blindness

More than 8% of men have some form of color blindness.

  • Golden Rule: Never use color as the sole source of information.
  • If a form field has an error, don’t just turn it red. Add a warning icon or a thicker border. This way, the user can identify the error even if they don’t distinguish the shade of red.

Mentor’s Tips

  • Beware of Grey on Grey: This is the most common visual trap in “modern” design. Grey text in small font sizes often fails the AA ratio miserably.
  • Use AAA Ratio for Long Content: If the user has to read a full 2,000-word article, make their life easier by using a ratio higher than 7:1; you will reduce their eye fatigue.
  • Test on Different Screens: What looks perfect on your professional monitor may be invisible on a cheap mobile screen with brightness at 50%. Use math to ensure consistency.

Useful Resources and Tools

accessibility-tree accessible-visual-identity color-token-palettes redlining-specifications