Color Contrast Checker
Calculate WCAG contrast ratio for two opaque sRGB colors and report common AA and AAA text thresholds. The result is a standards calculation, not a full accessibility audit.
Browser-localFreeNo upload required
What this tool is for
Calculate WCAG contrast ratio for two opaque sRGB colors and report common AA and AAA text thresholds. The result is a standards calculation, not a full accessibility audit.
How to use
- Enter foreground and background hex colors.
- Check the ratio and thresholds for normal and large text.
- Also inspect focus states, images, gradients, font weight, and real component states manually.
Example
Black #000000 on white #FFFFFF has a 21:1 ratio; #777777 on white is about 4.48:1 and misses the common 4.5:1 normal-text threshold.
FAQ
Is a passing ratio a complete accessibility audit?
No. Structure, keyboard use, names, focus, motion, and many other requirements remain.
Does the checker include transparency?
No. Provide the final opaque composited colors.
Reproducible examples
Known inputs and expected results
Run these examples in the workspace above and compare the result with the documented output.
Maximum opaque contrast
- Input
- Foreground #000000; background #FFFFFF
- Options
- Use opaque six-digit sRGB hex colors.
- Action
- Calculate the ratio.
- Expected output
- 21:1; passes common WCAG AA and AAA text thresholds.
- Explanation
- Black has relative luminance 0 and white 1, yielding (1.05)/(0.05).
Normal-text boundary failure
- Input
- Foreground #777777; background #FFFFFF
- Options
- Evaluate normal and large text separately.
- Action
- Calculate the ratio.
- Expected output
- About 4.48:1; it misses the 4.5:1 AA threshold for normal text.
- Explanation
- The same pair can pass a lower large-text threshold while still failing normal text.
Error or unsupported case
Unsupported transparency
- Input
- rgba(0,0,0,0.4) over an unknown image
- Expected error or limit
- A final opaque composite color cannot be derived from this input.
- Safer alternative
- Composite against the real backdrop first, then test the resulting opaque colors.
When not to use this tool
- APCA evaluation or complete WCAG auditing
- Gradients, images, transparency, focus, motion, or semantic accessibility checks
Algorithm and assumptions
The ratio uses WCAG 2.x sRGB linearization and relative luminance for two opaque colors; normal/large text thresholds are reported separately.
Input and output
Inputs are two six-digit hex colors. Output is contrast ratio and pass/fail results for WCAG text thresholds.
Supported formats and behavior
- Opaque six-digit hex colors
- WCAG 2.x relative luminance
- AA and AAA normal/large-text thresholds
Limits
- No alpha blending, gradients, images, or APCA
- Passing contrast does not make a whole interface accessible
Edge cases and common errors
- Three-digit hex is normalized only if the interface says so
- Transparency requires a known backdrop
- Large-text qualification depends on rendered size and weight
Release testing
Checks cover black/white, identical colors, the #777777 boundary case, invalid hex, swap, and mobile inputs.
Privacy boundary
The input and result stay in this browser session. ZZP Box does not upload or store the values entered in this tool.
Related reviewed tools
Choose the next tool by the operation you need, then review that page's stated input and limits.