Color Contrast Checker

The contrast requirement is 4.5:1, and gray text on white passes down to #767676

Contrast ratio compares the brightness of a text color and its background on a scale from 1:1 to 21:1. Identical colors give 1:1, and black on white gives 21:1. WCAG 2.2, the international web accessibility standard, asks for at least 4.5:1 (level AA) for normal-size text such as body copy. On a white background, #767676 is the lightest gray that passes at 4.54:1, and the next step lighter, #777777, falls short at 4.47:1. The order of the two colors does not matter, so white text on a #767676 background is also exactly 4.54:1.

Enter a text color and a background color in the checker above and it shows the ratio together with a pass or fail result for normal text, large text and icons. Set the text size and weight and it picks the criterion that applies to that text. If the pair falls short, it keeps the hue and changes only the lightness to find the nearest color that passes. The preview below shows how the same two colors look to people with a color vision deficiency, along with the contrast they get.

When you need to check contrast

Low-contrast text is a minor blur for someone with good eyesight, but it can be unreadable for people with low vision, older readers and people with a color vision deficiency. The W3C explains that SC 1.4.3 is meant to let people with moderately low vision or reduced contrast perception read text without assistive technology that boosts contrast. It also notes that the 4.5:1 ratio allows for the loss of contrast sensitivity that typically comes with age. Situations where it pays to calculate the ratio:

• Using brand colors for buttons and links: blues, reds and greens that look vivid on screen often have low contrast with white. A #3B82F6 link on white is 3.67:1, and white text on a #EF4444 button is 3.76:1. Both miss the 4.5:1 requirement for body text.
• Setting hint text and secondary text in light gray: #9CA3AF, popular for placeholders, dates and captions, is only 2.53:1 on white. Trying to make something look less important often makes it unreadable.
• Choosing dark mode colors: the same gray gives a completely different ratio on a dark background, so it needs its own calculation.
• Building color tokens for a design system: if text and background pairs are fixed by number from the start, you do not need to re-check every new screen.
• Preparing an accessibility audit or procurement review: contrast is one of the most common items in an audit, especially for sites that must meet a legal or contractual standard.

How the contrast ratio is calculated

WCAG 2.2 calculates contrast from a value called relative luminance. Divide each R, G and B value (0 to 255) by 255. If the result is 0.04045 or less, divide it by 12.92; otherwise compute ((value + 0.055) ÷ 1.055)^2.4 to get the linear value. Relative luminance is L = 0.2126 × R + 0.7152 × G + 0.0722 × B, and the contrast ratio is (L of the lighter color + 0.05) ÷ (L of the darker color + 0.05). Green carries the largest weight because the eye is most sensitive to green light.

Before May 2021 the definition printed the threshold as 0.03928 instead of 0.04045. WCAG 2.2 says the difference has no practical effect on the calculation, and indeed no 8-bit value falls between the two thresholds (10/255 = 0.0392, 11/255 = 0.0431). Here is the calculation for #3B82F6 on white.

Relative luminance is 0.2126 × 0.0437 + 0.7152 × 0.2232 + 0.0722 × 0.9216 = 0.2355. White has a relative luminance of 1, so the ratio is (1 + 0.05) ÷ (0.2355 + 0.05) = 3.6779… The W3C states that calculated values should not be rounded, and gives the example that 4.499:1 does not meet 4.5:1. For that reason this checker truncates to two decimals, showing 3.67:1, and makes the pass or fail decision on the value you see.

WCAG 2.2 contrast requirements at a glance

The text criteria have exceptions. Text in inactive user interface components, pure decoration, text that is not visible to anyone, and text that is part of a picture containing significant other visual content have no contrast requirement. Neither does text in a logo or brand name. SC 1.4.11, which covers icons and borders, looks at contrast against adjacent colors, and inactive components and elements left in the browser's default appearance are exceptions.

AA is the level most laws and guidelines ask for, and AAA is for more comfortable reading. WCAG 2.2 itself says that some content cannot satisfy every AAA criterion, so it does not recommend requiring AAA as a general policy for an entire site.

How many pixels is large text?

In WCAG, large text is 18pt or larger, or 14pt or larger when bold. In CSS, 1pt is 4/3px, so regular weight needs 24px or more and bold needs 18.67px or more. The W3C's explanatory document gives 14pt as roughly 18.5px, so bold text between 18.5px and 18.67px sits on the border. This checker converts exactly at 1pt = 4/3px. The size that counts is the size at which the content is delivered, before any user zoom.

WCAG notes that fonts with very thin strokes or unusual shapes are harder to read at low contrast. If you use a light-weight or decorative face, it is safer to reach 4.5:1 even for large text.

Common colors against white and black

The value for a white background in the table is the same as for white text on that color. The verdict is for normal text at AA (4.5:1).

As the table shows, a mid-gray near #767676 clears 4.5:1 just barely with either white or black text. For any background, one of white or black text reaches at least 4.58:1, so switching the text to white or black always achieves AA. Light colors such as yellows and oranges, on the other hand, are hard to use as text on white and need a much darker shade of the same family, such as #B45309.

How to fix a color that falls short

The "Adjust by lightness" tool converts the chosen color to the OKLCH color space and keeps its hue. It then moves lightness in steps of 0.001 and finds the first color that meets the criterion in the darker direction and in the lighter direction. Of the two, it suggests the one that moved less from the original lightness, and it re-checks the contrast after rounding to 8-bit HEX. If a step lands on a color the screen cannot show, it reduces only the chroma, as CSS Color 4 gamut mapping does, so the suggestion looks like the same family as your original.

When a background has a relative luminance between 0.10 and 0.30, like the #EF4444 button, white text stays below 7:1 and so does black text, which means no text color can reach AAA. You have to change the background, and choosing "Background color" in the checker shows how much darker the button must be. If the brand color has to stay, you can use it only for large text (24px or more, or bold 18.67px or more) and use a darker shade for body text.

Semi-transparent text is calculated from the blended color

Text written in CSS with rgba() or an 8-digit HEX value blends with the background. The blended color is computed per channel as text × opacity + background × (1 − opacity), rounded to 8-bit values as the screen does, and the contrast is calculated from that. This is how the contrast of black text on white changes with opacity.

When the background changes, the blended color changes too, so check the same text on every background it appears on. For text over a gradient or a photo, the safe approach is to enter the color at the point behind the text where contrast is lowest as the background.

Contrast with a color vision deficiency

The contrast formula uses weights based on typical color vision. With protanopia, red looks darker, so red text on black can feel lower in contrast than the calculated value. The preview in the checker simulates the strongest degree of each deficiency with the Machado, Oliveira and Fernandes (2009) model, which is the same one Chrome DevTools uses for vision deficiency emulation, and then recalculates the contrast between the two changed colors.

The red and green pair in the last row is already unusable for text at 1.27:1, and with deuteranopia it drops to 1.01:1, which is almost the same color. Information conveyed by color alone, such as red for an error and green for success, is a separate problem that WCAG 1.4.1 (Use of Color) addresses, so add text or a pattern as well. The simulated values are approximations to aid understanding, and the pass or fail decision uses the contrast of the original colors. If you would like to check your own color vision, you can also try the color blindness test.

Where contrast requirements come from: US and European rules

In the United States, the Department of Justice rule of April 2024 under Title II of the Americans with Disabilities Act requires the web content and mobile apps of state and local government entities to conform to WCAG 2.1 Level AA, which includes SC 1.4.3. In April 2026 the Department published an interim final rule that extended the compliance dates. As stated on ADA.gov and in the Federal Register notice of April 20, 2026, the date for entities with a population of 50,000 or more moved from April 24, 2026 to April 26, 2027, and the date for entities with fewer than 50,000 people and for special district governments moved from April 26, 2027 to April 26, 2028.

Federal agencies fall under Section 508 of the Rehabilitation Act. The Revised 508 Standards, issued by the Access Board in a final rule of January 18, 2017, require electronic content to conform to the Level A and Level AA success criteria of WCAG 2.0. In Europe, the harmonized standard EN 301 549 V3.2.1 (2021-03) requires in clause 9.1.4.3 that a web page satisfy WCAG 2.1 SC 1.4.3.

These rules cite older WCAG versions than 2.2, and which version and level apply to you depends on the rule or contract that covers your organization. SC 1.4.3 is the criterion they all point to for text contrast, and the checker's normal text AA and large text AA results show where a pair stands against its 4.5:1 and 3:1 thresholds in WCAG 2.2.

Common mistakes

• Rounding up to a pass: #777777 on white is 4.478…:1. It looks like 4.5 when rounded, but it fails.
• Treating 18px bold text as large: 14pt is 18.67px, so 18px bold text uses the normal text criterion (4.5:1).
• Treating hint text as an exception: the WCAG exceptions are inactive components, decoration, invisible text, text in pictures and logos. Placeholder text in a usable input and secondary text are not on that list.
• Forgetting hover and focus colors: calculate the colors for hover, focus and selected states as well, since each state is a combination users actually see.
• Checking only the light theme: a dark mode has different backgrounds and a completely different contrast, so calculate it separately.
• Overlooking icon-only buttons: icon buttons without text and input borders need 3:1 under SC 1.4.11.

Limits

• The WCAG 2.2 formula divides text into only two classes, normal and large, and does not account for stroke thickness. A thin font is harder to read at the same 4.5:1.
• WCAG 3.0 is still a working draft and has no settled new contrast method. This checker uses the formula of the current Recommendation, WCAG 2.2.
• Screen brightness, ambient light and differences between monitors are not modeled. The calculation is based on sRGB colors.
• Only one background color can be entered. For gradients or photos, check the worst-case point separately.
• The color vision deficiency preview is a model-based approximation, and what people actually see varies from person to person.
• Contrast is only one item of accessibility. Keyboard use, text alternatives and text resizing need to be checked separately.
• The colors you enter are calculated in your browser and are not sent to a server.

As of October 20, 2026. Based on WCAG 2.2 (W3C Recommendation, 12 December 2024 version), the DOJ Title II rule and its April 2026 interim final rule, the Revised 508 Standards and EN 301 549 V3.2.1 (2021-03).

Sources

• 01W3C — Web Content Accessibility Guidelines (WCAG) 2.2Relative luminance, contrast ratio, large text definition, SC 1.4.3, 1.4.6, 1.4.11 and the conformance note (12 December 2024 version)
• 02W3C — Understanding SC 1.4.3: Contrast (Minimum)Intent, the rationale for 4.5:1, no rounding (4.499:1 fails), 14pt and 18pt as about 18.5px and 24px
• 03W3C — Understanding SC 1.4.6: Contrast (Enhanced)AAA 7:1 and large text 4.5:1
• 04W3C — Understanding SC 1.4.11: Non-text ContrastUser interface components and graphics at 3:1
• 05ADA.gov — Fact Sheet: New Rule on the Accessibility of Web Content and Mobile Apps (first steps)WCAG 2.1 Level AA, compliance dates after the April 2026 interim final rule
• 06Federal Register — Extension of Compliance Dates for Nondiscrimination on the Basis of Disability; Accessibility of Web Information and Services of State and Local Government Entities (April 20, 2026)Dates moved from April 24, 2026 to April 26, 2027 and from April 26, 2027 to April 26, 2028
• 07U.S. Access Board — Information and Communication Technology (ICT) Standards and GuidelinesRevised 508 Standards, E205.4: WCAG 2.0 Level A and AA; final rule of January 18, 2017
• 08ETSI — EN 301 549 V3.2.1 (2021-03) Accessibility requirements for ICT products and servicesClause 9.1.4.3 Contrast (minimum): WCAG 2.1 SC 1.4.3
• 09Machado, Oliveira, Fernandes (2009) — A Physiologically-based Model for Simulation of Color Vision DeficiencyColor vision deficiency simulation matrices (severity 1.0)
• 10Chrome for Developers — Simulating color vision deficiencies in the Blink RendererDevTools vision deficiency emulation uses the same model
• 11Björn Ottosson (2020) — A perceptual color space for image processingOKLab conversion used by the lightness adjustment
• 12W3C — CSS Color Module Level 4, Gamut MappingOut-of-gamut colors keep their hue and lose chroma

Frequently asked questions

Related tools