Contrast Checker
Free browser tool that checks WCAG 2.x contrast between a foreground and background color. All processing runs locally in your browser.
WCAG contrast levels
Contrast ratio compares the relative luminance of two colors. Higher ratios mean stronger separation and better readability.
- AA Normal text: ratio at least 4.5 to 1
- AA Large text (18pt or 14pt bold): ratio at least 3.0 to 1
- AAA Normal text: ratio at least 7.0 to 1
- AAA Large text: ratio at least 4.5 to 1
How to use
- Pick a foreground and background color.
- Read the live ratio and WCAG pass/fail badges.
- If the pair fails your target, apply a suggested foreground or background adjustment.
- Copy a share link, summary, or CSS custom properties.
Foreground on background
AA Large · ≥3:1AAA Large · ≥4.5:1
Large heading text
AA Normal · ≥4.5:1AAA Normal · ≥7:1
Body text at normal size. The quick brown fox jumps over the lazy dog. Check how readable this paragraph feels on the chosen background.
Small caption text for secondary labels and metadata.
Background on foreground
AA Large · ≥3:1AAA Large · ≥4.5:1
Large heading text
AA Normal · ≥4.5:1AAA Normal · ≥7:1
Body text at normal size. The quick brown fox jumps over the lazy dog. Check how readable this paragraph feels on the chosen background.
Small caption text for secondary labels and metadata.