How to Check Color Contrast for Accessibility

Problem

You need to ensure text is readable against its background, meeting WCAG accessibility standards.

Prerequisites

• Understanding of WCAG
• Knowledge of color contrast ratios

Steps

1. 1. Understand WCAG thresholds

   WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (Level AA). Level AAA requires 7:1 for normal text and 4.5:1 for large text. The ratio ranges from 1:1 (no contrast) to 21:1 (black on white).

   Input

   AA: 4.5:1 normal, 3:1 large

   Output

   thresholds defined

2. 2. Compute the contrast ratio

   Calculate the relative luminance of each color, then compute the ratio: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter and L2 is the darker luminance. Relative luminance accounts for human perception, weighting green more than red and blue.

   Input

   foreground: #777777, background: #FFFFFF

   Output

   ratio: 4.48:1

3. 3. Evaluate and adjust

   Compare the ratio to the WCAG threshold. If it fails, darken the foreground or lighten the background. Use a contrast checker tool to find compliant color pairs. Document the compliance level (AA or AAA) for your design system.

   Input

   ratio 4.48 < 4.5

   Output

   FAIL AA — darken text to #767676

Expected result

A contrast ratio measurement and pass/fail verdict against WCAG thresholds.

Common errors

Checking only one color pair

Check all text-background combinations in your design, including hover states, disabled text, and placeholders. Each must meet the threshold.

Ignoring non-text elements

WCAG also requires 3:1 contrast for UI components like icons and borders. Check these in addition to text.

Troubleshooting

• If the ratio is close to the threshold, test with actual users or accessibility tools.
• Remember that large text (18pt+ or 14pt+ bold) has a lower threshold (3:1 for AA).

Security limits

• Color contrast is an accessibility requirement, not a security measure. Poor contrast affects usability for all users.