Colour Contrast Checker (WCAG)

Check your foreground and background colour combination against WCAG 2.1 AA and AAA accessibility standards. See pass/fail for all five criteria.

contrast-checker.tool
Quick swatches
Large Text (18pt+)
Normal text — Lorem ipsum dolor sit amet, consectetur adipiscing elit. The quick brown fox.
UI Element

Why Contrast Matters

Low colour contrast makes text difficult or impossible to read for people with visual impairments, including colour blindness (affecting about 8% of males) and low vision. High contrast also helps all users in bright sunlight, on low-quality screens, or when fatigued. WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios that web content must meet to be considered accessible.

WCAG Contrast Requirements

WCAG 2.1 defines two conformance levels. Level AA (minimum): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold) and UI components. Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text. Most organisations target AA as their minimum standard. AAA is aspirational and not always achievable for all colour combinations.

Frequently Asked Questions

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal body text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or bold 14pt+). UI components and graphical elements also require 3:1. A ratio of 1:1 means identical colours (no contrast); 21:1 is the maximum (black text on white).
Black (#000000) on white (#ffffff) has a contrast ratio of 21:1 — the theoretical maximum. This passes all WCAG levels for all text sizes. Most practical designs use slightly softer combinations: dark grey (#333333) on white gives about 12.6:1, which still comfortably passes both AA and AAA.
Find the darkest or lightest variant of your brand colour that achieves 4.5:1 against your background. Most brand colours have accessible variants — a slightly darker blue, for example, will pass while the lighter tint might not. Tools like Google's Material Color System provide accessible colour palettes.
Relative luminance is the linearised brightness of a colour measured on a scale from 0 (black) to 1 (white). The WCAG contrast ratio is calculated from the relative luminance of the two colours: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. This formula accounts for how human eyes perceive brightness non-linearly.
Yes — placeholder text in input fields must meet contrast requirements (at minimum 4.5:1 against the input background). Many designs use light grey placeholder text that fails WCAG. Because placeholder disappears on input, users who cannot read it may not understand what the field expects.

Related Tools

◑
CSS Gradient
Build CSS gradients
🎨
HEX to RGB
Convert colour codes
🖱
Box Shadow
CSS shadow generator
{}
CSS Formatter
Format & minify CSS