Loading page content
Check a foreground and background pair against the WCAG contrast thresholds, with separate results for normal text, large text, and UI components.
Check color combinations against WCAG 2.1 accessibility guidelines. Ensure your text and background colors meet AA and AAA contrast requirements for all users.
Presets
Contrast Ratio
19.29:1
WCAG AA
WCAG AAA
Large Text Preview (24px)
Normal body text preview at 16px. The quick brown fox jumps over the lazy dog.
Small text at 12px. Harder to read if contrast is low.
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+). AAA requires 7:1 and 4.5:1 respectively.
The thresholds are 4.5:1 for normal text at AA, 3:1 for large text (18pt, or 14pt bold) and for UI components and graphical objects, and 7:1 for AAA. The one people miss is the UI component rule: icon buttons, form field borders, and focus indicators need 3:1 against their background, and a great many design systems fail on exactly those.
When a pair fails, adjust lightness rather than hue. Contrast ratio is computed from relative luminance, so shifting a color toward a different hue at the same lightness changes the ratio barely at all. Darkening or lightening one side is what actually moves the number.