Colour contrast checker
Type or pick a text colour and a background colour to get the WCAG contrast ratio and a pass or fail for each level. If it fails, the fix helper finds the nearest text colour that passes, keeping the same hue. Everything is worked out in this page and nothing is uploaded.
Hex (#fff, #ffffff, with or without alpha), rgb(), hsl() or a name such as navy.
Contrast ratio
4.54 : 1
Some levels pass and some fail. Check the table for the one you need.
Preview
Normal text, 16 px. The quick brown fox jumps over the lazy dog.
Large text, 24 px
WCAG 2.x results
| Level | Needs | Result |
|---|---|---|
| AA, normal text | 4.5:1 | ✓ Pass |
| AA, large text | 3:1 | ✓ Pass |
| AA, UI components and graphics | 3:1 | ✓ Pass |
| AAA, normal text | 7:1 | ✗ Fail |
| AAA, large text | 4.5:1 | ✓ Pass |
Large text means at least 18 pt, or 14 pt bold. That is about 24 px, or about 18.66 px bold.
Fix it: find the nearest passing text colour
Keeps the hue and saturation of your text colour and changes only its lightness, looking both darker and lighter, until it reaches the ratio you pick.
Your text colour already reaches 4.5:1 (4.54:1). Nothing to change.
What a WCAG 2 ratio does not tell you
- •The WCAG 2 formula is a simple model of brightness. It does not account for font weight, thin strokes, glare, or how light text on a dark background is seen, so a pair can pass and still be hard to read, especially in dark mode.
- •WCAG 3 drafts and APCA use a different method that depends on which colour is the text and how large it is. That work is still evolving and this page does not implement it. The levels above are the ones in the current standard, WCAG 2.x.
- •The ratio is never rounded up to pass. 4.499 does not meet 4.5, so a pair that is just under a limit is shown with extra decimals and marked Fail.
How the check works
- •Each colour is turned into a relative luminance: the red, green and blue values are converted from sRGB to linear light (using the 0.04045 threshold from the standard), then weighted 0.2126, 0.7152 and 0.0722. The ratio is (lighter + 0.05) divided by (darker + 0.05), from 1:1 for identical colours to 21:1 for black on white.
- •The levels are 4.5:1 for normal text and 3:1 for large text and for user interface components and graphics at AA, and 7:1 and 4.5:1 for normal and large text at AAA. Large text means at least 18 pt, or 14 pt bold, which is about 24 px or 18.66 px bold.
- •The comparison uses the exact value, not the rounded one. 4.499 does not meet 4.5, so when a result is just under a limit the page shows extra decimals instead of a misleading 4.50, and marks it Fail.
- •A colour with transparency is mixed with what is behind it before measuring: the background is placed over white, and the text colour over the background. Real pages can have images or gradients behind the text, which this page cannot know about.
- •The fix helper keeps the hue and saturation and moves the HSL lightness darker and lighter until the target is reached, then rounds to a hex colour and checks that exact hex, so the value you copy is the value that passes. If even black or white cannot reach the target on that background, it says so.
Questions
- Which contrast ratio do I need?
- For most text, aim for at least 4.5:1 (WCAG AA). Large text and the borders or icons that identify a control need 3:1. AAA asks for 7:1 for normal text. Your legal or client requirement decides which level applies.
- Why does my pair fail when it looks fine to me?
- The ratio is a fixed formula, not a judgement of your eyes. Good lighting and good eyesight make many pairs look fine that are hard to read on a dim screen, in sunlight or with low vision. The formula also ignores font weight and size beyond the large text rule.
- Is this the same as APCA or WCAG 3?
- No. This page uses the WCAG 2.x formula, which is what current accessibility requirements refer to. APCA and the WCAG 3 drafts use a different method and are still evolving, so they are not included here.
- Are my colours uploaded or saved?
- No. The calculation runs in your browser and nothing is sent anywhere or stored. Refreshing the page puts back the example colours.