Low-contrast text is one of the most common accessibility failures on the web, and one of the easiest to fix. It affects people with low vision and color-vision differences, but also anyone reading a phone screen in bright sunlight. The Web Content Accessibility Guidelines (WCAG) turn "readable enough" into a number you can test.
What contrast ratio means
Contrast ratio compares the relative luminance (perceived brightness) of two colors and ranges from 1:1 (identical colors) to 21:1 (black on white). The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker one's. Luminance is calculated from the linearized sRGB values, weighted so that green counts most and blue least.
The WCAG thresholds
- Level AA, normal text: at least 4.5:1.
- Level AA, large text (18pt/24px or larger, or 14pt/18.66px bold): at least 3:1.
- Level AAA, normal text: at least 7:1. Level AAA, large text: at least 4.5:1.
- Non-text contrast (WCAG 2.1): UI components such as input borders, icons, and focus indicators need at least 3:1 against adjacent colors.
Most teams target AA. Text that is purely decorative, part of a logo, or disabled is exempt from the text requirements.
Common mistakes
- Light gray text on white. It looks elegant and often fails at around 2:1.
- Text placed over photos or gradients, where contrast changes along the line.
- Placeholder text and disabled states that are too faint to read.
- Checking only the default state and forgetting hover, focus, and visited link colors.
- Relying on color alone to convey meaning, such as red and green status dots with no label or icon.
How to fix a failing color pair
- Keep the hue and adjust lightness. Darken the text (or lighten the background) in small steps.
- Re-check after each change until the ratio reaches the target.
- For text over images, add a solid or semi-opaque overlay behind the text instead of hoping the photo cooperates.
- Define accessible color tokens once in your design system so every component inherits them.
Passing the ratio isn't the whole story
Contrast is necessary but not sufficient. Also test with real users, check your palette in a color-blindness simulator, and never rely on color as the only signal.
Dark mode counts too
Dark themes need their own contrast checks. Pure white on pure black can cause glare for some readers, so many designs use off-white on a very dark gray, which still passes comfortably.
Frequently asked questions
What is a good contrast ratio for text?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA. Aim for 7:1 where you can.
What counts as large text in WCAG?
Text at 18pt (24px) or larger, or 14pt (about 18.66px) or larger and bold.
Does contrast apply to icons and buttons?
Yes. WCAG 2.1 requires at least 3:1 contrast for meaningful UI components and graphics, such as input borders, icons, and focus indicators.
Are logos and disabled elements exempt?
Yes, logos and inactive (disabled) components are exempt from the minimum contrast requirements, but clear legibility is still good practice.
Try it: Contrast Checker — free, runs in your browser, nothing is uploaded.
Originally published at ilovekit.app.
