Color contrast (WCAG)
Check the contrast ratio between text and background against the WCAG standard. The tool computes the relative luminance of both colors and derives a contrast ratio, then compares it against the AA and AAA thresholds for normal text. Everything runs in your browser – no colors are ever sent anywhere.
How the color contrast checker works
The calculator follows the WCAG 2.1 formula for relative luminance directly. From a HEX color it first computes linear R, G, B values (with gamma correction applied differently above and below the 0.03928 threshold), then combines them with weights 0.2126 / 0.7152 / 0.0722 – the human eye is most sensitive to green and least sensitive to blue. From the relative luminance of the lighter (L1) and darker (L2) color, it calculates the contrast ratio as (L1 + 0.05) / (L2 + 0.05). The result ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, maximum contrast).
The tool then compares the ratio against the WCAG thresholds for normal text: 4.5:1 for level AA and 7:1 for the stricter level AAA. Inputs are two color fields (text and background); outputs are the numeric ratio, two pass/fail results, and a live preview of the text rendered in those colors.
How to use the color contrast checker
- In the "Text color" field, pick or enter the HEX code of your font color.
- In the "Background color" field, pick the color the text sits on.
- The tool instantly recalculates the contrast ratio and shows whether it passes AA and AAA.
- The preview below the fields shows how the combination looks in practice.
| Text | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #555555 | #ffffff | 7.46:1 | pass | pass |
| #777777 | #ffffff | 4.48:1 | fail | fail |
| #ffffff | #2563eb | 5.17:1 | pass | fail |
Note: WCAG allows more lenient thresholds for large text (18pt or larger, or 14pt bold) – 3:1 for AA and 4.5:1 for AAA. This calculator applies the stricter normal-text thresholds, which is the safer default for general use.
What the color contrast checker is useful for
It's most commonly used when designing websites and apps – to verify that button, navigation, or footer text stays readable for people with low vision or color blindness. Design system authors use it to define color palettes, developers use it to check components before shipping, and it's also handy when preparing presentations or print materials with colored backgrounds. Meeting AA is a common requirement in accessibility audits, and some organizations or public bodies require it by law (e.g. government websites). Since everything runs locally in your browser, no color or page context is ever transmitted anywhere.
FAQ
What does a contrast ratio of 4.5:1 mean?
It's the minimum threshold for WCAG level AA on normal text. It means the lighter color must be roughly 4.5 times brighter than the darker one for text to remain sufficiently readable, including for people with reduced vision.
What's the difference between AA and AAA?
AA is the standard accessibility level (4.5:1 ratio for normal text); AAA is a stricter level (7:1 ratio) recommended for content where readability is especially critical. Most websites and legal requirements follow the AA level.
Do the same thresholds apply to large text?
No. WCAG allows lower thresholds for large text (18pt or larger, or 14pt bold) – 3:1 for AA and 4.5:1 for AAA, since bigger letters remain legible even with less contrast. This calculator uses the stricter normal-text thresholds.
Are the colors I enter sent to a server?
No. The entire relative luminance and contrast ratio calculation runs directly in your browser using JavaScript. No color or other data is ever transmitted.
Why isn't the ratio just a simple brightness difference?
Human brightness perception isn't linear, and the WCAG formula accounts for this with gamma correction and weighting of color channels by eye sensitivity. A plain RGB difference wouldn't match how we actually perceive contrast.
What should I do if a combination fails even AA?
Try a darker or lighter shade of one of the colors – even a small adjustment is often enough to cross the 4.5:1 threshold. The tool recalculates in real time, so you'll see the effect immediately.
Does the calculator work with colors entered as RGB or HSL?
The input fields use the browser's standard color picker, which converts colors to HEX internally. If you have a color in another format, convert it first with a tool like the Color Converter.
Does contrast only matter for text, or other elements too?
WCAG also defines separate rules for non-text elements (icons, form field borders) with a lower 3:1 threshold. This calculator is designed primarily for text-to-background contrast.
Sources & standards
📅 Last updated: 28 July 2026