Contrast ratio
Ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the luminance of the lighter colour
The 0.05 stands for ambient light reflected by the screen.
Contrast checker
Compare text and background colors, calculate their contrast ratio, and quickly check the relevant WCAG AA and AAA thresholds.
- Clipboard
Aa
Contrast ratio:
- AA normal text:
- AA large text:
- AAA normal text:
Was this tool useful?
How does this tool work?
This checker calculates the contrast ratio between a text colour and a background colour using the WCAG method, then shows whether the pair passes the AA and AAA thresholds. Use it to validate a palette before adding it to a mock-up, a stylesheet or a component, without sending the colours to a server.
Each hexadecimal colour is converted into relative luminance: the red, green and blue channels are linearised, then weighted by how sensitive the eye is to each one (green accounts for over 70% of luminance).
The ratio divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. It ranges from 1:1 (two identical colours) to 21:1 (black on white) and does not depend on the order of the two colours.
The result is compared with three thresholds: 4.5:1 for normal text at AA, 3:1 for large text at AA and 7:1 for normal text at AAA. A preview shows text in the two chosen colours.
How to use this tool
Choose the text colour
Enter or pick the colour used for the characters.
Choose the background colour
Enter the colour of the background behind the text.
Read the ratio and levels
The ratio is shown with Pass or Fail for AA normal text, AA large text and AAA normal text.
Adjust until you reach the target
Darken the text or lighten the background in small steps and check again.
WCAG contrast ratio formula
The ratio compares the relative luminance of the two colours.
Relative luminance
L = 0.2126 × R + 0.7152 × G + 0.0722 × B, with channels linearised between 0 and 1
A channel c (value out of 255 divided by 255) equals c ÷ 12.92 if it is at most 0.03928, otherwise ((c + 0.055) ÷ 1.055)^2.4.
- L_1
- Luminance of the lighter colour
- L_2
- Luminance of the darker colour
- R_s, G_s, B_s
- Linearised red, green and blue channels
Use cases
Validate a brand palette
Check that a brand colour stays readable as text on a white or dark background before rolling it out across a site.
Fix an accessibility audit
Find the closest shade that reaches 4.5:1 when an audit flags grey text as too light.
Pick a button colour
Compare a button label with its background, then test the hover and disabled states.
Examples
Grey #777777 on white
This widely used grey narrowly misses AA: it works for large headings, not for body text.
Input
Text color: #777777 · Background color: #ffffffResult
Contrast ratio: 4.48:1 · AA normal text: Fail · AA large text: Pass · AAA normal text: FailGrey #595959 on white
A deeper grey reaches the AAA threshold of 7:1 exactly while staying softer than pure black.
Input
Text color: #595959 · Background color: #ffffffResult
Contrast ratio: 7.00:1 · AA normal text: Pass · AA large text: Pass · AAA normal text: PassTips and best practices
- Large text means 24 px (18 pt) regular or 18.66 px (14 pt) bold; below that, aim for 4.5:1.
- For text over an image or gradient, test against the least favourable area of the background.
- Icons and form field borders follow another WCAG criterion (1.4.11), which asks for 3:1 against adjacent colours.
- A passing ratio is not everything: very thin or very small text can still be hard to read.
Sources and references
- Web Content Accessibility Guidelines (WCAG) 2.2 (opens in a new tab), W3CPage in English
Frequently asked questions
What is a contrast ratio?
It is the luminance of the lighter colour divided by that of the darker one, each plus 0.05. It ranges from 1:1 for identical colours to 21:1 for black on white.
Which thresholds should I meet?
For level AA, 4.5:1 for normal text and 3:1 for large text. For level AAA, 7:1 for normal text. AA is the level required by most regulations, including the European standard EN 301 549.
Why does #777777 on white fail?
Its ratio is 4.48:1, just below 4.5:1. The tool does not round in your favour: at 4.48, normal text does not reach AA.
Does the order of the two colours matter?
No. The formula always puts the lighter colour on top, so white text on blue and blue text on white give the same ratio.
Is transparency taken into account?
No. The tool compares two opaque colours. For a semi-transparent colour, first work out the colour it produces on the background, then check that colour.
Are my colours sent anywhere?
No. The calculation runs in your browser and the colours never leave your device.
Related tools
Keep going with these tools
Tools similar or complementary to this one.
Similar tools
Encode or decode a URL, its parameters, and any special characters it contains.
Web & SEOUse this tool
Turn a title or phrase into a clean slug that is ready to use in a URL.
Web & SEOUse this tool
Validate, normalize and inspect web addresses locally.
Web & SEOUse this tool
Read next
GuideBest practicesBeginner
WCAG Contrast: How to Make Colors Accessible
Understand WCAG contrast thresholds, measure color combinations, and fix cases that make an interface harder to read or use.
31 August 202618 min
GuideBest practicesBeginner
How to optimize 50 images for the Web at once
Resize a batch of images, convert them to WebP and remove metadata with one reusable Pipeline.
6 September 20262 min
TutorialBest practicesBeginner
Optimize images for the Web without losing quality
Resize, compress and choose between WebP, AVIF and other formats with a practical workflow that reduces file size without unnecessary visual loss.
30 August 20264 min
NewsConcepts and technologiesIntermediate
Is local browser processing replacing traditional online tools?
WebAssembly, browser APIs and faster devices enable more processing locally. How far can this approach replace services that upload files to servers?
30 August 20264 min