glunty Color Contrast Checker (WCAG)
Foreground on background. Get the ratio and AA/AAA verdicts. Local only.
- Runs in your browser
- No sign-up
- No watermark
- No installs
Normal text sample: the quick brown fox jumps over the lazy dog.
Large text sample: the quick brown fox.
What this tool does
Measures the WCAG contrast ratio between a foreground (text) color and a background
color, then reports whether that pairing passes or fails each accessibility threshold.
Both colors convert from sRGB to relative luminance: each channel is normalized to the
0 to 1 range and linearized, then combined as
0.2126 R + 0.7152 G + 0.0722 B. The ratio is
(Llight + 0.05) / (Ldark + 0.05), a value from 1:1 (identical colors) up
to 21:1 (black on white). Everything runs in your browser; no colors leave your machine.
How to use it
Set the two colors, either by clicking a swatch to pick visually or by typing a hex
value (3 or 6 digits, with or without the leading #). The big number is
the contrast ratio, updated live. The four badges show PASS or
FAIL for WCAG AA and AAA at both normal and large text sizes, and the
preview box draws your text color on your background so you can judge legibility by eye
as well as by number.
Common use cases
- Checking body text and link colors against a page background before shipping.
- Verifying that a brand color has enough contrast to sit on white or on a dark theme.
- Deciding whether a button label needs to be bolder or larger to clear the AA threshold.
- Auditing a design system token pair for AA (baseline) or AAA (stricter) compliance.
- Explaining to a client or teammate why a light-gray-on-white caption is hard to read.
Common pitfalls
- Large text has a lower bar. Text at 24px regular or 19px bold and up only needs 3:1 for AA, not 4.5:1. A pairing that fails for body copy can still pass for a heading, so check at the size you will actually use.
- Transparency is not handled. The ratio assumes two opaque colors. If your text or background has an alpha value, flatten it against the layer behind it first, then check the resulting opaque color.
- Passing contrast is necessary, not sufficient. A high ratio does not make color the only signal. Do not rely on color alone to convey meaning (for example, error states), and remember contrast says nothing about font choice or spacing.
Frequently asked questions
- What is a good color contrast ratio?
- WCAG sets thresholds by conformance level and text size. For normal text, AA requires a ratio of at least 4.5 to 1 and AAA requires at least 7 to 1. For large text (roughly 24px regular or 19px bold and larger), AA requires 3 to 1 and AAA requires 4.5 to 1. A ratio of 21 to 1 (black on white) is the maximum; 1 to 1 means the two colors are identical.
- What is the difference between WCAG AA and AAA?
- AA is the level most legislation and accessibility policies target; it is a sensible baseline for body text and interface elements. AAA is stricter and is meant for content that must be readable by the widest possible audience, including people with moderately low vision. Meeting AAA everywhere is not always practical, so many teams aim for AA on all text and AAA where they reasonably can.
- What counts as large text for contrast?
- WCAG defines large text as at least 18 point (about 24 pixels) at regular weight, or at least 14 point (about 18.66 pixels) when bold. Large text gets a lower contrast requirement because bigger letter shapes stay legible at a given contrast. Anything smaller than these sizes is treated as normal text and must meet the higher ratio.
- How is the contrast ratio calculated?
- Each color is converted from sRGB to a relative luminance value. Every channel is divided by 255, then linearized (values at or below 0.03928 are divided by 12.92; higher values use ((c + 0.055) / 1.055) raised to the 2.4 power). Luminance is 0.2126 times R plus 0.7152 times G plus 0.0722 times B. The ratio is (lighter luminance + 0.05) divided by (darker luminance + 0.05), giving a number from 1 to 1 up to 21 to 1.
- Does it matter which color is the foreground and which is the background?
- For the ratio itself, no. The formula always puts the lighter color on top and the darker one on the bottom, so swapping foreground and background yields the same number and the same pass or fail result. The distinction still matters for design and for the live preview, which draws your text color on your background color.
- Does this checker account for transparency or opacity?
- No. It compares two fully opaque colors. If your text or background uses an alpha value, the color that actually reaches the eye is a blend of the layers behind it, which this tool does not compute. Flatten the colors to their effective opaque values first, then check those.
- Why does my color pass AA but fail AAA?
- AA and AAA use different thresholds. Normal text passes AA at 4.5 to 1 but needs 7 to 1 for AAA, so any ratio between 4.5 and 7 clears AA while missing AAA. That is common and usually acceptable, since AA is the level most guidelines require. Nudge the text darker or the background lighter to close the gap when AAA is the goal.
Cite this tool
For academic, journalistic, or technical references. Pick a format:
Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.