Afzargah
فا EN

Colour tools

Colour contrast checker

Check the contrast between text and background colour, and see if it meets the WCAG standard.

Large text sample (a heading)

This is a normal-size sample of body text, to see how readable it is on this background.

This tool runs entirely inside your browser. No file or text is sent to any server.

How to use

  1. Set the text colour and the background colour — use the colour picker, or type the HEX code directly.
  2. The contrast ratio and a live preview of the text on that background update immediately.
  3. Below the preview you'll see whether this pairing passes or fails all four WCAG levels (AA and AAA, for normal and large text).

Notes on this tool

WCAG defines "large text" as at least 24px (about 18pt) at normal weight, or at least 19px (about 14pt) bold. Large headings usually qualify; ordinary paragraphs don't.

The contrast ratio ranges from 1:1 (no contrast at all) to 21:1 (pure black on pure white), calculated from both colours' relative luminance using the official WCAG 2 formula.

AA is the minimum level most accessibility laws and web standards require. AAA is stricter, recommended for important text or for readers with low vision.

This tool only works out the contrast of text against a single flat background colour. If the background is a photo or a gradient, test its darkest or lowest-contrast point separately.

Colour blindness is a separate issue from luminance contrast, and this tool doesn't check for it — two colours can have a high contrast ratio and still be hard for a colour-blind visitor to tell apart.

Frequently asked questions

What's the difference between AA and AAA?
AA is the minimum level that most accessibility laws and web guidelines (including government content and most companies) require. AAA is a stricter step up, for when you want the text to stay easily readable for a wider range of low-vision readers.
What size counts as "large text", exactly?
Under WCAG, large text means at least 24px at normal weight (roughly 18pt), or at least 19px bold (roughly 14pt bold). Big headings usually fall into this category, and a lower contrast ratio is considered acceptable for them because larger letters are easier to read.
My background is a photo or a gradient — how do I check contrast?
This tool only accepts a single flat colour. For a photo or gradient, pick out the colour at the spot the text sits on, at its lowest-contrast point (for example with a browser eyedropper tool or a design app), and test that colour here.
Does this tool check for colour blindness too?
No. It only measures the luminance contrast between two colours, using the WCAG formula. Colour blindness is a separate issue — two colours can have a high contrast ratio and still be hard to tell apart for some forms of colour blindness, so it's worth relying on shape and icons too, not colour alone, to carry meaning.