Color Contrast Checker
Calculate WCAG sRGB contrast and report AA/AAA text thresholds for two opaque colors.
Loading tool…
How to use Color Contrast Checker
Compare a foreground and background using WCAG relative luminance. Decisions use the unrounded ratio, with separate results for normal text and qualifying large text.
- Enter opaque foreground and background colors in a supported sRGB form.
- Select Run tool to calculate luminance contrast and text thresholds.
- Review the result, then copy it or download the generated file.
Good to know
- No transparency, gradients, image backgrounds, APCA, or full-page accessibility audit.
- Large text means at least 18 pt regular or 14 pt bold under WCAG. Text size, font rendering, focus indicators, and other requirements need separate review.
Common questions
Does a displayed 4.50 automatically pass AA?
The decision uses the original ratio. Rounding a value below 4.5 must not turn a failure into a pass.
Keep going with related tools
All colors →Color Converter
Convert opaque sRGB colors between HEX, integer RGB, and HSL representations.
ColorsCSS Gradient Generator
Generate a two-color linear-gradient declaration with validated colors, angle, and stop positions.
AccessibilityColor Token Contrast Matrix
Export every named foreground/background token pair with full-value contrast ratios and explicit 3, 4.5 and 7 thresholds.
ColorsColor Difference Calculator
Calculate CIELAB DeltaE76 distance between two opaque sRGB colors.
ImagesStatic Browser Display Patterns
Show selectable static colors, RGB bars, gray steps and a grid for direct visual comparison in a local panel.
AccessibilityTarget Rectangle Spacing Check
Check exact 24 CSS pixel target-size and spacing geometry for a supplied rectangle layout.