Color Contrast Checker
Check if text is readable on its background, using the WCAG 2.2 contrast rules used in accessibility audits.
Normal text (16px). The quick brown fox jumps over the lazy dog.
اردو متن کی مثال: یہ تحریر پڑھنے میں آسان ہونی چاہیے۔
Large text (24px or 18.66px bold)
Button / iconThe WCAG contrast levels
| AA, normal text | at least 4.5 : 1. This is the level most laws and audits require. |
|---|---|
| AA, large text | at least 3 : 1. Large means 24px (18pt) or more, or 18.66px (14pt) bold or more. |
| AAA, normal text | at least 7 : 1. Enhanced level, good for long reading. |
| AAA, large text | at least 4.5 : 1. |
| Buttons, icons and form borders | at least 3 : 1 against the colours next to them (WCAG 1.4.11, non-text contrast). |
How it is calculated
Each colour's relative luminance (how bright it looks) is worked out from its red, green and blue values. The ratio is (lighter + 0.05) ÷ (darker + 0.05) and runs from 1 : 1 (same colour) to 21 : 1 (black on white). Ratios are never rounded up: 4.49 : 1 does not pass the 4.5 : 1 level.
Transparent colours (such as rgba(0,0,0,.5) or #00000080) are blended over the background first, so the result matches what people actually see. A transparent background is treated as sitting on white.
Fixing a colour that fails
When a level fails, the checker suggests the closest colour that passes. It keeps the same hue and saturation and only makes the colour lighter or darker, so your brand colour stays recognisable. Click a suggestion to try it.
You can type colours as #1E3A8A, #fff, rgb(30, 58, 138), hsl(225, 64%, 33%) or a CSS name such as navy.
Rate this tool
Log in to leave a review.
