What contrast ratio do I need for accessible text?
WCAG 2 level AA needs at least 4.5:1 for normal text and 3:1 for large text (24 pixels, or about 18.66 pixels bold). Level AAA needs 7:1 and 4.5:1. Enter your colors to see your ratio.
- Enter or pick the text color.
- Enter or pick the background color.
- Read the ratio and the pass or fail table.
- If normal text fails AA, try the suggested color.
- Re-check hover, disabled and placeholder states too.
Examples
Gray text on white
Input
Text #999999 on #ffffff
Result
2.84:1. Fails AA for normal text. Suggested: a darker gray such as #767676 or darker.
Frequently asked questions
How is the ratio calculated?
With the WCAG 2 formula: (lighter relative luminance + 0.05) divided by (darker + 0.05), using sRGB gamma-corrected luminance.
Does placeholder text need to pass?
WCAG applies contrast requirements to text that conveys information, which includes placeholder text people rely on to understand a field.
What about text on images?
Check against the lightest and darkest parts of the image behind the text, or add a solid or semi-transparent overlay.
Is this the same as WCAG 3 or APCA?
No. This uses the WCAG 2 ratio, which is what current accessibility laws and audits reference.