Colour contrast checker
Check your text against its background. See the WCAG contrast ratio and which AA or AAA levels your colours pass. Copy the results with your colour values.
Enter two colours, check the levels, then copy your report.
Enter opaque HEX, RGB, HSL, OKLCH or a CSS name. Results update as you type.
Ready. The grey example fails AA normal text.
Pass levels use the unrounded ratio. A displayed 4.50 does not make a value below 4.5 pass.
Normal text at 16px. Can you read this comfortably?
Large text at 24px
Bold text at 19px
| WCAG 2.2 check | Minimum ratio | Result |
|---|---|---|
| AA normal text | 4.5:1 | Fail |
| AAA normal text | 7:1 | Fail |
| AA large text | 3:1 | Pass |
| AAA large text | 4.5:1 | Fail |
| UI components and graphics | 3:1 | Pass |
Large text starts at 24 CSS px regular or 18.667 CSS px bold. UI checks compare each component with its adjacent colour.
Black text on this background would pass all listed levels at 21.00:1.
Signed in, your two colour values save automatically to your private account. Account saving
How to check colour contrast
Enter two colours
Paste your text and background colours, or use their pickers. Both colours must be opaque and within sRGB.
Read the ratio and levels
Check AA and AAA for normal and large text. The UI row uses 3:1. The preview shows your pair at three text sizes.
Copy your report
Use Copy report to keep the colour values, ratio and pass levels together. Test each colour pair and state in your interface.
Using the contrast checker
Change either colour and the result updates immediately. You do not need to press a Check button.
Text colour and Background colour
Enter the colours as complete values, such as #336699, rgb(51 102 153) or hsl(210 50% 40%). The input format is detected automatically.
CSS names such as rebeccapurple work. OKLCH, OKLab, Lab, LCH, HWB, HSV, CMYK and Display P3 values also work when their converted colour fits sRGB. CMYK is an unprofiled estimate.
| Control | What it does |
|---|---|
| Text colour | Sets the text in the preview and the first colour in the report. |
| Background colour | Sets the preview background and the second colour in the report. |
| Pick text colour / Pick background colour | Opens your browser’s sRGB colour picker. Choosing a swatch replaces that colour value. |
| Swap colours | Reverses foreground and background. The ratio stays the same, but the preview changes. |
| Try black on white | Replaces both fields with an example that gives 21:1 and passes every listed level. |
| Try grey on white | Loads #777777 over white. It passes AA large text but fails AA normal text. |
Ratio, pass levels and the preview
The ratio runs from 1:1 for identical colours to 21:1 for black and white. A higher ratio means more luminance contrast.
The table shows separate decisions for each use. A pair can pass large text while failing normal text. UI components need comparison against the actual adjacent colour.
| Result | How to read it |
|---|---|
| Contrast ratio | Usually shown to two decimal places. Extra digits appear near a pass threshold. |
| AA normal / AAA normal | Use these for body copy: at least 4.5:1 or 7:1 respectively. |
| AA large / AAA large | Use these only for qualifying large text: at least 3:1 or 4.5:1 respectively. |
| UI components and graphics | Checks the 3:1 threshold for required visual information. This does not check an entire control. |
| Text preview | Shows 16px normal, 24px regular and 19px bold text using your two colours. |
| Black or white suggestion | Shows whichever of black and white gives more contrast over your background, with its actual ratio. |
The suggestion is an alternative, not the nearest shade of your original colour. Edit Text colour yourself to try it.
Copy report and automatic saving
Copy report copies both input values, the ratio to eight decimal places and every listed pass or fail. Clipboard access must be allowed by your browser.
Your two colours restore when you return. Signed in, these values save to your private account automatically.
Keyboard controls
Use ordinary browser keyboard controls. There are no global shortcuts.
| Key | Action |
|---|---|
| Tab / Shift + Tab | Move through colour fields, pickers and buttons. |
| Enter / Space | Activate a focused button. Colour picker keyboard behaviour depends on your browser. |
Invalid colours and limits
An invalid colour hides the previous result and disables Copy report. The marked field explains what needs changing.
Transparency is refused, including transparent and alpha below 1. First composite the colour over its actual background. Wide-gamut colours outside sRGB are also refused.
Use the colour converter to inspect a fallback before checking it. Relative CSS colours, variables, system colours and none channels are unsupported.
Small colour changes can cross the threshold
Changing #777777 to #767676 over white moves normal text from AA fail to AA pass. The change is one channel step.
| Text over white | Ratio, rounded | AA normal text |
|---|---|---|
| #777777 | 4.48:1 | Fail |
| #767676 | 4.54:1 | Pass |
| #888888 | 3.54:1 | Fail |
| #000000 | 21.00:1 | Pass |
These synthetic examples were calculated with this tool’s module on 4 October 2026. Pass decisions use the full ratio.
The WCAG contrast guide explains font-size rules, exceptions and how to test colours in a real page.
Frequently asked questions
What contrast ratio passes WCAG AA?
Normal text needs at least 4.5:1. Large text needs at least 3:1. Large means 24 CSS pixels regular or about 18.667 CSS pixels bold. Required visual information in UI components and graphics generally needs 3:1 against adjacent colours.
What does WCAG AAA require?
Normal text needs at least 7:1. Large text needs at least 4.5:1. Passing these colour checks does not certify your page for AAA: many other accessibility requirements apply.
Why can a rounded 4.50 ratio fail?
WCAG thresholds use the unrounded ratio. A ratio of 4.499 is below 4.5, even if a two-decimal display rounds it to 4.50. This checker shows extra digits near a threshold and decides passes before rounding.
Can I check transparent text or a gradient?
This checker accepts opaque colour pairs. For transparency, first find the resulting colour over the actual background. For a gradient or image, check the least contrasting background behind each part of the text. There is no single flat colour that covers every position.
Does this checker use APCA?
No. The ratio and pass levels use WCAG 2.2. APCA is a separate contrast method explored in draft WCAG 3 work. Its scores do not replace WCAG 2 conformance thresholds.
Are my colour values uploaded?
The contrast calculation runs in your browser. Signed out, your draft stays in this browser. Signed in, the two entered colour values save automatically to your private account.
Something missing? Request a feature