Contrast Checker

Introduction

Low contrast between text and its background is one of the most common — and most fixable — accessibility failures on the web. When light gray text sits on a white page, people with low vision, older readers, and anyone reading outdoors on a bright screen struggle to make out the words. The Web Content Accessibility Guidelines, published by the W3C and adopted by governments worldwide, define a measurable, mathematical standard for this problem: the contrast ratio. WebAIM, whose free contrast checker has become the de facto industry tool, describes the ratio as the difference in luminance between two colors, expressed as a number that ranges from 1:1 (identical colors) to 21:1 (pure black against pure white)[webaim-contrast-checker].

This Contrast Checker puts that math directly in front of you. Enter a text color and a background color as six-digit hex values, and the tool instantly computes the WCAG contrast ratio, the relative luminance of each color, and whether the pair passes the AA and AAA thresholds for normal text, large text, and user interface components. The pass or fail verdicts come straight from WCAG 2.x success criterion 1.4.3 (contrast of text) and 1.4.11 (contrast of non-text content), which MDN documents with worked examples for each threshold[mdn-contrast].

Accessibility is not a niche concern. Around one in twelve men and one in two hundred women have some form of color vision deficiency, and contrast problems compound with age: the lens yellows and the pupil lets in less light, so the same gray-on-white text that was readable at twenty becomes a struggle at sixty. The U.S. General Services Administration's Section 508 program, which enforces accessibility on federal digital products, requires agencies to meet WCAG 2.0 AA — and in practice nearly every federal acquisition now references the WCAG success criteria directly[section508-create]. Designing for contrast is therefore both an ethical and a legal obligation, not an aesthetic preference.

How to Use

Type a six-digit hex color into each field — or paste one from your design tool, code editor, or color picker. The leading # is optional; both #336699 and 336699 work. The calculator updates the moment both fields contain a valid color, so there is no button to press.

Here are three worked examples.

Example 1 — A passing design. Text color #333333 on a #FFFFFF background produces a contrast ratio of about 12.6:1. That comfortably passes every WCAG level: AA for normal text (4.5:1), AAA for normal text (7:1), and both large-text thresholds. This is the kind of pairing you should use for body copy.

Example 2 — A borderline failure. Text color #767676 on a #FFFFFF background produces a ratio of about 4.54:1. It barely clears AA for normal text (4.5:1), but it fails AAA for normal text (7:1) and would need to be darkened by one or two steps to reach AAA. Notice how close to the line it is: a single shade lighter — #7A7A7A — drops below 4.5:1 and fails even AA for normal text.

Example 3 — Text on a colored background. White text (#FFFFFF) on a gold background (#FFD700) yields only about 1.40:1 — a dramatic failure that makes the text nearly unreadable. The same white text on a darker blue like #003366 jumps to roughly 12.6:1 and passes every level. The lesson: light text needs a dark surface, and dark text needs a light one.

The Formula

WCAG defines contrast as the relative luminance of the lighter color divided by the relative luminance of the darker color, plus 0.05 in both terms:

Relative luminance is the key step. It is not the raw brightness of a color but a weighted sum of the linearized red, green, and blue channels, because the human eye is far more sensitive to green than to red or blue. WCAG 2.x computes it as follows[webaim-article]:

Each channel is first converted from the 8-bit sRGB value to a linear value. For a channel value c from 0 to 255, the linear value is:

The + 0.05 in the ratio formula prevents division by zero when one color is pure black (luminance 0) and ensures that even the darkest pair never exceeds 21:1. Pure black against pure white gives exactly (1.0 + 0.05) ÷ (0 + 0.05) = 21:1, the theoretical maximum.

The thresholds that follow from this math are defined in WCAG 2.x success criteria 1.4.3 and 1.4.11: 4.5:1 for normal text at AA, 3:1 for large text (18 pt or 14 pt bold, or 24 px and 18.66 px bold respectively) and for UI components and graphical objects, 7:1 for normal text at AAA, and 4.5:1 for large text at AAA[mdn-contrast]. The APCA algorithm, a proposed replacement for WCAG contrast in WCAG 3, uses a perceptual model tuned to readability on self-luminous displays rather than the luminance-ratio math described here — but WCAG 2.x ratios remain the compliance standard that Section 508 and the ADA rely on today[apca].

Reference Table

The table below shows the contrast ratios for common text-and-background pairings, computed with the WCAG 2.x formula. Several are drawn from real-world design systems, including the gray #767676 frequently used for secondary text in modern interfaces.

The pattern the table reveals is consistent: colors with a large gap in relative luminance pass, while colors that are similar in perceived brightness fail regardless of hue. Note that #767676 on white (4.54:1) and #767676 on black (4.62:1) land almost at the same ratio — both are just above the AA threshold for normal text. The border cases matter in practice because anti-aliasing, screen gamma, and viewing angle can each shave several hundredths of a point off the rendered ratio.

Practical Tips

• Use a 4.5:1 minimum for body copy, always. Reserve the 3:1 large-text threshold for headlines, buttons, and UI labels at 24 px or 18.66 px bold. For small print, disclaimers, and captions, target AAA at 7:1.
• Keep a default pairing that is boringly safe. Choose a primary text color at or near #333333 on white (12.6:1) and only introduce lighter grays for secondary text once you have verified them against your background.
• Never rely on hue alone. Two colors that are very different in hue — white on gold, red on green — can still fail contrast because their luminance is similar. Always check the ratio, not the color wheel.
• Check UI components, not just text. WCAG 1.4.11 requires 3:1 for the boundaries and graphics that identify interactive elements: input borders, focus outlines, chart lines, and icons. A button that "looks fine" can still fail if its edge contrast is under 3:1[section508-create].
• Verify your color variables, not your swatches. If you define --text-secondary as #767676 in your design system, that value propagates everywhere. Check the token once and document the pass/fail result in your style guide.
• Pair this tool with the Color Converter. When a color fails, convert it to HSL, nudge the lightness, and convert back — the color space makes it easy to darken or lighten while keeping the same hue.
• Check proportions with the Golden Ratio Calculator too. Contrast decides whether text is readable; proportion decides whether the layout feels balanced. A design can pass one check and still fail the other, so run both before you call a component done.
• Design for the Aspect Ratio Calculator standard you will ship. Verify contrast against the actual delivery frame — a 16:9 hero and a 4:5 social crop use very different amounts of background, and a contrast pass on the full canvas can fail after the platform crops it.

Limitations

The WCAG contrast ratio is a necessary check, but it is not a complete test of readability. The formula measures the ratio between two flat colors; it says nothing about font weight, letter spacing, font size, rendering quality, or the ambient light where the page is actually read. A 4.5:1 ratio in perfect 12-point text will read differently on a phone in sunlight than on a calibrated monitor in a dark room, and the formula does not capture that difference[apca].

The ratio also assumes that the background is uniform. Real interfaces layer text over gradients, photographs, and patterns; when a label sits on an image, the effective contrast is somewhere between the lightest and darkest pixels behind it. The safe practice is to test against the worst-case background region, or to place text on a solid scrim. Similarly, the formula uses the sRGB color space and ignores display gamma differences between devices — two monitors showing the same hex color can differ in actual luminance enough to matter at a borderline ratio.

Finally, WCAG contrast is a proxy for what people with full color vision experience; it does not fully model color vision deficiency. Two colors can pass a contrast check and still be indistinguishable to someone with deuteranopia because the check weights red and green channels by luminance only. When color alone carries meaning — errors, status, links — always pair it with a non-color cue such as an icon or underline. As Horton and Quesenbery put it in A Web for Everyone, accessibility is about designing for the widest possible range of people, and contrast is just the first of many such tests[web-for-everyone].

Frequently Asked Questions

❓ What is a contrast ratio?

✅ A contrast ratio is the WCAG measure of the difference in relative luminance between two colors, expressed as a number from 1:1 to 21:1. Pure black on pure white scores 21:1, the maximum possible.

❓ What is a good contrast ratio for text?

✅ WCAG 2.x requires 4.5:1 for normal text at AA, 3:1 for large text at AA, 7:1 for normal text at AAA, and 4.5:1 for large text at AAA. Most designers treat 4.5:1 as the minimum for body copy.

❓ How do you calculate contrast ratio?

✅ Convert both colors to relative luminance using the linearized sRGB channels (0.2126R + 0.7152G + 0.0722B), then divide the lighter luminance plus 0.05 by the darker luminance plus 0.05.

❓ What is the difference between AA and AAA?

✅ AA is the widely required standard (4.5:1 for normal text, 3:1 for large text). AAA is a stricter level (7:1 normal, 4.5:1 large) that many government and financial sites pursue.

❓ Why does my button look fine but fail contrast?

✅ Interactive components, boundaries, and icons must meet a 3:1 ratio under WCAG 1.4.11. A button that reads clearly can still fail if its border, focus indicator, or icon has low contrast against the background.

❓ Does the leading # in a hex color matter?

✅ No. Both #336699 and 336699 represent the same color, and this calculator accepts either. The important thing is that all six hex digits are present.

❓ What contrast ratio do large text and small text need?

✅ Small text needs 4.5:1 at AA and 7:1 at AAA. Large text — 18 pt regular or 14 pt bold, roughly 24 px and 18.66 px bold — needs only 3:1 at AA and 4.5:1 at AAA.

❓ Is a 21:1 ratio always best?

✅ Not necessarily. Maximum contrast pairs are best for body text, but pure black on pure white can cause halation and eye strain for some readers. A very dark gray like #333333 on white offers 12.6:1 with less glare.

❓ What is APCA contrast?

✅ The Advanced Perceptual Contrast Algorithm is a proposed replacement for WCAG 2.x contrast, designed to model perceived readability on self-luminous displays. It is not yet the compliance standard; WCAG 2.x ratios remain the legal reference.

❓ Does contrast checking fix all accessibility issues?

✅ No. Contrast is one success criterion among many. Keyboard navigation, screen reader labels, alt text, focus management, and color-independent signaling all matter. Contrast is the first and most common failure, not the last.