How to check text colour contrast and read AA or AAA results
Test an opaque foreground and background, compare the four text thresholds, and inspect the colours used in the real interface.
Open the toolChoose the actual foreground and background
Open the Color Contrast Checker and identify the text colour and the background directly behind it. Use the colours applied to the relevant state of your page, such as a button’s normal or hover state. This tool accepts opaque three- or six-digit HEX values and integer rgb(r, g, b) values. It does not take a screenshot, sample an image, combine transparent layers or inspect a live website. An rgba value, HSL colour or photograph needs a different preparation step before this two-colour check.
Check a clear reference pair
Enter #000000 in Text color and #ffffff in Background color, then select Apply. The contrast ratio is 21.00:1 and all four displayed text checks pass. Try #777777 against #ffffff next. Its ratio is approximately 4.48:1: AA normal text fails, AA large text passes, and both AAA rows fail. Copy or download the result if you need a record. Keep the colour pair with it so you can tell which design state the numbers describe.
Read the four checks separately
The AA thresholds are 4.5:1 for normal text and 3:1 for large text. The AAA thresholds are 7:1 and 4.5:1 respectively. Large text has a specific meaning: at least 18pt regular or 14pt bold, or the equivalent size for the relevant script. A heading label alone does not make text large. Check the delivered font size and weight before choosing the row. A pair that passes the large-text row may still fail for the smaller text elsewhere in the same component.
Treat rounded values carefully
The displayed ratio has two decimal places, while the pass/fail rows use the unrounded calculation. Do not round a value below a threshold upward and declare it a pass. For another example, #767676 on white is approximately 4.54:1 and passes AA normal and AAA large text, while it still fails AAA normal text. When editing a colour, apply again because the old result is cleared. Review the actual text at its final size rather than judging readability only from the small sample in the calculator.
Recheck the design in context
Test each relevant text/background pair, including alternate themes and interactive states. The preview is a sample of your entered pair, not a scan of the finished site. A passing row covers that contrast comparison; it does not certify the whole page’s accessibility, keyboard operation, labels or reading order. This tool does not calculate APCA or non-text component requirements. Processing stays in the browser. After applying the colours to your design, verify that the final interface still uses the same opaque values you checked.
Sources
Updated:
Try it in the tool →