WCAG Contrast Checker
WCAG Contrast Checker — runs in your browser. Inputs are not stored.
WCAG color contrast
Enter values, then press Calculate.
How to use
- Enter Foreground (text) HEX and Background HEX. Defaults are #111111 and #ffffff.
- Press Calculate for a sample-sentence preview, contrast ratio, and normal-text / large-text ratings.
- To reverse the colors, press Swap colors then calculate again.
- If a rating fails, darken or lighten the HEX a little and calculate again.
- Reset restores the default black-and-white pair. Only opaque HEX is supported.
Key concepts
WCAG contrast check is a web-accessibility measure of how well body and button text stands out from the background. Contrast ratio is computed from relative luminance and compared with WCAG 2.x. Normal text is AA 4.5:1 and AAA 7:1; large text (about 18 pt or 14 pt bold) is AA 3:1 and AAA 4.5:1. It is a contrast checker that shows WCAG 2 ratios and AA/AAA for whether body and button text is distinguishable from the background. It is a checker for quickly viewing contrast ratio and AA/AAA of body color versus background HEX in an accessibility review. It is not a final legal determination.
The result is a reference calculation and does not replace a final accessibility audit or legal conformance. Semi-transparent colors with alpha, gradients, and text on images may need more than this formula. Calculation runs only in the browser. The relative-luminance formula assumes opaque sRGB HEX. Translucent overlays and type on photos can differ from reality. Large-text and normal-text thresholds differ, so calculate title color and body color separately.
Example
Foreground #111111 on background #ffffff yields a ratio around 19:1, close to AAA for both normal and large text. Light gray #9ca3af on white often fails AA for normal text. Swap colors darkens the background and changes the preview impression. #2563eb text on #ffffff can land in the mid-range and barely pass or fail normal-text AA. Try a darker blue. #6b7280 text on #f9fafb has a low ratio and often fails normal text. Changing the text to #111 gets close to AAA.
Related: Color palette · Color converter
Frequently asked questions
How is the WCAG large-text threshold applied?
The relaxed 3:1 / 4.5:1 criteria for 18 pt or 14 pt bold are shown in the large-text field. That field is the relaxed threshold for titles and 18 pt and up. The 18 pt / 14 pt bold assumption applies only to the large-text field.
What is the WCAG AAA contrast ratio?
7:1 or more for normal text and 4.5:1 or more for large text. AA is 4.5:1 and 3:1 respectively. AAA is 7:1 for body copy, so pale brand colors often fail. Brand pastels often miss AAA.
Can HEX with a transparent alpha channel be used for contrast?
Only opaque HEX is supported. Transparency is not supported; enter the composited final HEX. For translucency, composite first, then enter HEX.
What sentence is used in the contrast preview?
It shows sample text “Sample 가나다” with the same foreground and background. The preview is a sample sentence and can differ from real component size.
Does this check guarantee legal accessibility conformance?
It is a reference calculation. Do a final audit separately. Do not treat this number as a legal pass. Do not replace an audit checklist with this number alone.
Can I swap foreground and background at once?
The Swap colors button exchanges the two HEX values. Press Calculate again. You can also compare a dark-mode pair with Swap colors.
Last reviewed: 2026-09-04