WCAG Color Contrast Checker
Check a pair of solid colors before using them for text, icons or controls. Compare AA and AAA thresholds, preview your typography and find a readable foreground without uploading a screenshot.
Local processing · No account required · Copy and export
Workspace
PixelOkay · Developer toolsPreview how these colors appear in a real interface.
How to use WCAG Color Contrast Checker
- Enter foreground and background HEX values, or use the color pickers. Three-digit HEX is expanded automatically.
- Set your preview font size and weight. Choose a contrast target before using the foreground suggestion.
- Read every threshold result, then copy the CSS pair or download a text report for your design review.
When to use this tool
Check the contrast of interface text, buttons or chart labels before handing colors to a developer. This is a color-pair test, not a complete accessibility audit of a webpage.
How color contrast is calculated
The ratio compares the relative luminance of two sRGB colors. Black on white gives 21:1; identical colors give 1:1. Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text uses 3:1 and 4.5:1 respectively. Large means at least 24 CSS pixels, or about 18.67 pixels when bold. The displayed ratio is rounded; pass/fail uses the unrounded value.
Worked example
Foreground: #000000
Background: #ffffff
Contrast: 21.00:1
Normal text: AA and AAA passLimits and output checks
This checker evaluates opaque solid-color pairs. Transparency, gradients, images, focus states and the actual rendered font need additional review. A passing color pair does not establish that a whole website conforms to WCAG.
Reference: WCAG contrast guidance.
Frequently asked questions
Does 4.49:1 pass AA for normal text?
No. The minimum is 4.5:1; rounding a displayed ratio does not turn a lower ratio into a pass.
Can I check buttons and icons?
Use the 3:1 result as a starting point for relevant non-text contrast checks, then assess adjacent colors, states and the applicable WCAG exceptions.
Why does the suggested foreground change?
The suggestion searches grayscale colors for one that meets your selected ratio against the current background. Your brand color is not preserved automatically.
Check an actual foreground/background pair
Enter the two opaque solid colors used together and review the reported ratio for the relevant role. Compare other states and placements separately.
Scope of this workflow
This color-pair calculation is not a complete WCAG conformance assessment. Images, gradients, alpha and actual rendering need their own review.
Color Converter — HEX, RGB, HSL & HSV · All developer tools · Privacy policy · Contact PixelOkay