One ratio, several thresholds
Normal text uses 4.5:1 for AA and 7:1 for AAA. Large text uses 3:1 and 4.5:1. The same measured ratio appears in every row; the requirement changes with the use.
ONELESS / COLOR
WCAG Contrast Checker
A contrast number is useful only when you know which requirement it is being compared with. WCAG Contrast Checker brings the color pair, text size, font weight and criterion table into one report. Use it to review a proposed text style or a meaningful graphical indicator before putting the result into context on the real page.
Open WCAG Contrast Checker. JavaScript powers the workspace; the full guide is available below.
UNDERSTAND THE RESULT
Color, with a little context.
Size is part of the decision
The selected text is considered large at 24 CSS pixels, or at 18⅔ CSS pixels with the Bold setting. This tool offers regular 400 and bold 700 specimens; verify the final font and rendered size in your product.
Transparent foregrounds are composited
A foreground with alpha is composited onto the specified opaque background before its relative luminance is measured. The effective HEX shown is rounded for display only; threshold comparisons use the unrounded composited channels and ratio.
HOW TO USE IT
From a starting point to a usable result.
- Enter the foreground as HEX, RGB, HSL or a CSS named color. Enter an opaque HEX background.
- Set the actual text size in CSS pixels and choose Regular or Bold. Read the selected-text verdict alongside the full criterion table.
- Copy report to preserve the inputs, ratio and each threshold result. For non-text content, decide separately whether the graphic or control indicator is covered and whether this is the relevant adjacent color.
A WORKED EXAMPLE
Why 4.48:1 can pass one row and fail another
Use #777777 on #FFFFFF at 16 px Regular. Its approximately 4.48:1 contrast fails normal-text AA but exceeds large-text AA. At 24 px it qualifies for the large-text threshold. Rounding a number up to 4.50 never changes the underlying pass/fail decision.
EVERYDAY USES
Make the next small decision easier.
Review a design handoff
Copy the intended body-text pair and selected size into a review note. Recheck if opacity, background or typography changes.
Inspect an icon boundary
Use the 3:1 non-text row for a meaningful indicator against its adjacent background where the criterion applies. Decorative artwork and inactive controls have different applicability rules.
LOCAL WORKSPACE
Your work stays in this browser.
The tool processes color values locally. It does not upload the input to a processing server or save it in browser storage. Leaving or reloading the page clears the working state. Copying places the selected result on your clipboard; sharing sends only the page address without your working values.
These tools describe sRGB colors. Browser decoding, color management and the display can affect what you see; they are not an ICC proofing workflow or a print-color guarantee. Read the site privacy policy for information about the surrounding website.
KEEP IT NEARBY
One less search next time.
Press Ctrl + D on Windows or Command + D on Mac to bookmark this page. Your browser may also offer Create shortcut or Add to Home Screen. Shortcuts open the tool; they do not include your colors or images.
Choose a shortcut icon
Soft Coral
Warm Peach
Sunset Orange
OneLess Blue
Rose PinkQUESTIONS, ANSWERED
A few useful details.
Does passing certify my page?
No. This tool evaluates a specified color pair and selected text condition. It does not inspect keyboard access, semantics, all component states, or every WCAG requirement.
Can the background be transparent?
Use the actual opaque color beneath the foreground. A transparent background, photograph or gradient requires determining the relevant composited colors before checking.
Why is a displayed 4.50 sometimes a failure?
The displayed ratio has two decimals. A real value just below 4.5 may round to 4.50, but the decision is made before rounding. The copied report includes six decimals for review.
How is this different from Color Contrast Checker?
Both use the same sRGB ratio. This page adds actual text-size/weight classification, foreground alpha compositing and an explicit non-text row with applicability guidance.
How is large text determined in this checker?
WCAG’s large-text thresholds correspond to at least 24 CSS pixels for regular text or approximately 18.67 CSS pixels for bold text. Enter the actual size and weight rather than assuming a heading is large enough.
Which level should I review for normal body text?
Review the normal-text AA result for the 4.5:1 threshold and AAA for 7:1. These are color-contrast checks; they do not cover all accessibility requirements.
Why does text opacity change the result?
A translucent foreground is composited over the chosen opaque background before contrast is calculated. The visible text color can therefore differ from its unblended RGB channels.
REFERENCES
CSS color values — MDN · WCAG 2.2 text contrast — W3C · Enhanced contrast — W3C · Non-text contrast — W3C
ANOTHER SMALL STEP
Keep the next tool close.
Ready for a little more color?
A clearer report for the text and controls you actually use.
Return to WCAG Contrast Checker ↑