Check the WCAG contrast ratio between a foreground color and a background color.
The tool calculates relative luminance for both hex colors, reports the contrast ratio, and marks whether the pair passes AA and AAA thresholds for normal and large text.
Thresholds
- AA normal text: 4.5:1
- AA large text: 3:1
- AAA normal text: 7:1
- AAA large text: 4.5:1
This is a browser-only calculation for design checks and accessibility reviews.
When to use it
Pick text and background colors during UI design, verify button labels on tinted headers, and document contrast decisions before hand-off to engineering. Invalid hex values return a clear error instead of a misleading ratio.
Limitations
Results depend on the values you enter and standard browser math; they are not audited for regulatory compliance. Very large inputs, locale-specific rounding, or edge cases may differ from spreadsheet or server implementations.
Example
For example, enter the default sample values on the form and compare the output with a known reference; adjust one input at a time to see how the result changes.