1:1 to 21:1 · AA · AAA
Contrast checker
Black on white has a WCAG contrast ratio of 21:1, the highest possible, and white on #0060fd has 5.13:1. Enter a text color and a background to check yours.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
The ratio and the five checks update as you type. A ratio is cut to two decimals, never rounded up, so 4.499 shows as 4.49:1 and fails the 4.5:1 check.
Scanned by 
NortonTM Safe Web
At a glance
- Price
- No charge
- Account
- None needed
- Upload
- Not applicable — you type colors, nothing is sent anywhere
- Formula
- (lighter luminance + 0.05) ÷ (darker luminance + 0.05)
- Thresholds
- AA 4.5:1 normal and 3:1 large text; AAA 7:1 normal and 4.5:1 large text; 3:1 for interface parts
- Standard
- WCAG 2.2 definitions of relative luminance and contrast ratio
Contrast ratios of well-known pairs
These rows were produced by the same code as the checker. A check mark means the pair meets the requirement; a cross means it does not.
| Text color | Background | Ratio | AA normal | AA large | AAA normal | AAA large | Interface parts |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| Check | Minimum ratio |
|---|---|
| AA, normal text | 4.5:1 |
| AA, large text | 3:1 |
| AAA, normal text | 7:1 |
| AAA, large text | 4.5:1 |
| AA, interface parts and graphics | 3:1 |
How to check a color pair
Enter both colors
Type the text color and the background color in any CSS notation, or use the pickers. The swap button exchanges them, which is useful for light text on a dark background.
Read the ratio
The ratio runs from 1:1 (identical colors) to 21:1 (black on white). The sample below the fields shows the pair at 16 px and at 24 px, so you can judge the result with your own eyes.
Look at the five checks
Each tile says Pass or Fail for one WCAG requirement: AA and AAA for normal text, AA and AAA for large text, and AA for parts of an interface. If normal text fails AA, the page suggests the nearest text color that passes.
How the contrast ratio is calculated
WCAG measures contrast through relative luminance, the brightness of a color from 0 (black) to 1 (white). Each red, green and blue channel is divided by 255; a value up to 0.04045 is divided by 12.92, and a larger value is raised to a power: (value + 0.055) divided by 1.055, then to the power 2.4. Luminance is then 0.2126 times red plus 0.7152 times green plus 0.0722 times blue, which reflects how strongly the eye responds to each. The contrast ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05.
WCAG 2 asks for at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at level AAA. Large text is at least 18 point, which is 24 CSS pixels, or at least 14 point in bold, about 18.66 pixels. Success criterion 1.4.11 asks for 3:1 for the parts of an interface and the graphics a reader needs to see, such as a field border or a chart line. The ratio is compared with each threshold without rounding. If a color has transparency, a transparent background is laid over white and a transparent text color over the background before measuring. This page implements WCAG 2.x only; it does not calculate APCA, which is discussed for a later version of the guidelines.
Contrast questions
What contrast ratio does WCAG require for text?
At level AA, normal text needs at least 4.5:1 and large text at least 3:1. At level AAA the figures are 7:1 for normal text and 4.5:1 for large text. The ratio is measured between the text color and the color directly behind it.
What counts as large text?
WCAG defines large text as at least 18 point, which is 24 CSS pixels, or at least 14 point in bold, which is about 18.66 CSS pixels. Anything smaller counts as normal text and needs the higher ratio.
What is the lightest gray that passes AA on white?
#767676 on white has a ratio of 4.54:1 and passes the 4.5:1 check for normal text. The next lighter gray, #777777, scores 4.47:1 and fails. For 7:1 (AAA), the lightest gray is #595959, which scores 7.00:1.
Why does 4.49 fail when it looks like 4.5?
The checks compare the exact ratio with the threshold. A ratio of 4.499 is below 4.5, so it fails, and the page prints it as 4.49:1 instead of rounding it up. Pure red on white is a real example: 3.99:1 fails the 4.5:1 check for normal text, even though it is close.
What contrast do icons, borders and form fields need?
Success criterion 1.4.11 Non-text Contrast, added in WCAG 2.1, asks for at least 3:1 between the parts of an interface or a graphic that a reader needs to see, such as a field border, a focus ring or a chart line, and the colors next to them. Disabled controls and purely decorative graphics are exempt.
Does a passing ratio make a page accessible?
No. Contrast is one requirement among many. Font size and weight, line spacing, color alone carrying meaning, focus visibility, text over images and gradients, and how people with different kinds of color vision see a page all matter too. Use this result as one input, and test the page with real content.