My big heading passes the check but body text in the same colour fails. What counts as large text, and is it different for Arabic fonts?
WCAG treats text as large at 24 px or more, or about 18.66 px or more when bold, and large text needs only 3:1 for AA instead of 4.5:1. So the same colour can pass for headings and fail for paragraphs. The rule goes by size, not typeface, so give small Arabic text some extra margin.
One colour, two results: an example
Take grey #8A8A8A on a white background. The ratio is 3.45:1. In the list of checks, 'AA large text' passes because it needs 3:1, and 'UI components and graphics' passes too, while 'AA normal text' fails because it needs 4.5:1. 'AAA large text' fails as well, since it also asks for 4.5:1.
So the tool is not contradicting itself. It gives one ratio and compares it against different limits depending on text size. Your big heading sits in the first group, your paragraph in the second.
What exactly counts as large text
- Text at 18 pt, roughly 24 px, or larger.
- Or bold text at 14 pt, about 18.66 px, or larger.
- Anything below that is normal text, needing 4.5:1 for AA and 7:1 for AAA.
The tool prints this definition under the input fields, and its live sample shows three lines: normal text at 16 px, large text at 24 px, and large bold text at 18.66 px, in Arabic and English. Compare them by eye on your own colours.
Is it different for Arabic fonts?
The rule itself makes no distinction between typefaces: the limit is size in pixels or points. In practice, some Arabic fonts look smaller than others at the same size, because the letter bodies are small within the line, or the strokes are thin. The ratio does not measure any of that, and the tool's limitations say so directly: it does not account for font weight, typeface or real rendered size.
In practice: if your Arabic text sits right around 24 px in a light font, do not lean on the large text allowance. Hold it to 4.5:1, especially for prices and details a shopper reads on a phone.
Fixing the paragraphs without touching the headings
- Keep #8A8A8A for headings that are genuinely large, if you like the shade.
- In the Color contrast checker, choose the 4.5:1 target, and 'Nearest darker color' suggests #767676 at 4.54:1 for body text.
- If you want AAA for normal text, choose 7:1 and you get #595959 at 7.00:1.
Watch heading length too: three lines of large type still count as large text under the rule, but to a reader it has become a paragraph. To keep headings short, count their words in the Word and character counter. And passing the ratio does not make a page fully accessible; it is a check of colour only.
Common questions
Is 24 px on a phone the same as 24 px on a laptop?
The rule refers to the size set in your design. Screens and zoom settings vary, which is why extra margin helps for text close to the limit.
My heading is bold at 18 px. Is it large?
No. The bold limit is about 18.66 px, and 18 px falls just short, so it is normal text and needs 4.5:1.
Does the tool know the text size on my site?
No. It compares two colours and shows the result for each size group; you decide which group applies to your text.
