Web Tools
Color Contrast Checker
Check WCAG text contrast ratios for two web colors.
Contrast preview
The quick brown fox jumps over the lazy dog. 1234567890
Contrast ratio
14.68:1
Calculated from WCAG relative luminance. Maximum contrast is 21:1.
These pass/fail checks cover WCAG contrast thresholds for text. They do not by themselves determine whether an entire interface is accessible.
About This Tool
Readable foreground and background combinations are a basic part of accessible web design. This checker calculates the contrast ratio between two opaque HEX colors using the WCAG relative-luminance formula, then compares that ratio with the familiar AA and AAA thresholds for normal and large text. It complements a color converter: conversion tells you how a color is represented, while contrast checking evaluates the luminance difference between a pair of colors for this specific accessibility criterion.
How To Use It
- Enter the foreground or text color as a 3- or 6-digit HEX value.
- Enter the background color in the same format. The preview shows the pair together.
- Read the contrast ratio and the AA/AAA results for normal and large text.
- Use Swap colors to reverse the visual roles. The numerical ratio stays the same because contrast is based on the lighter and darker luminances.
Examples
Black on white
#000000 and #FFFFFF produce the maximum 21:1 contrast ratio and pass the listed AA and AAA text thresholds.
Identical colors
The same foreground and background color produce 1:1 contrast, which fails the listed text thresholds.
Threshold interpretation
A 4.5:1 ratio meets AA for normal text and AAA for large text, but does not meet AAA for normal text, which requires 7:1.
Useful Notes
How the contrast ratio is calculated
Each sRGB channel is converted to a linear-light value. Relative luminance is then calculated as 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter relative luminance and L2 is the darker. The result ranges from 1:1 for equal luminance to 21:1 for black and white.
AA and AAA text thresholds
The checker reports the commonly used WCAG text thresholds: 4.5:1 for AA normal text, 7:1 for AAA normal text, 3:1 for AA large text, and 4.5:1 for AAA large text. Large-text classification depends on font size and weight, so the tool reports the threshold rather than trying to infer your CSS typography.
Contrast is only one accessibility requirement
Passing a ratio does not certify a page or component as accessible. Interfaces also depend on keyboard access, focus visibility, semantics, labels, state communication, zoom/reflow, motion, non-text contrast, and other requirements. Treat this result as one targeted design check.
Opaque HEX colors only
This calculator intentionally accepts opaque 3- and 6-digit HEX colors. Transparency changes the rendered color based on what is behind it, so alpha colors require compositing before a meaningful contrast ratio can be calculated.
Use the rendered colors that users actually see
Gradients, images, overlays, opacity, filters, blending, and changing backgrounds can produce different effective colors across a component. A single pair of HEX values is reliable only when it represents the actual foreground and background at the point being evaluated.
FAQ
What is a good contrast ratio?
It depends on the applicable criterion and text size. This tool shows the AA and AAA text thresholds beside the calculated ratio rather than labeling one ratio as universally good.
Why does swapping the colors keep the same ratio?
The formula always divides the lighter luminance by the darker luminance after applying the WCAG offsets, so reversing foreground and background does not change the numerical ratio.
Does a passing result mean my website is WCAG compliant?
No. Color contrast is one requirement among many. The result only evaluates this foreground/background pair against the listed text-contrast thresholds.
Are the colors uploaded?
No. HEX parsing, luminance calculation, and threshold checks run locally in the browser.
Related Tools
Color Converter
Convert and preview HEX, RGB, and HSL colors.
CSS Unit Converter
Convert relative CSS units with the context that determines their real size.
HTML Entity Encoder / Decoder
Convert text to and from HTML entities directly in your browser.
Regex Tester
Test JavaScript regex patterns and inspect matches and capture groups.