Contrast Ratio Calculator: Make Your Text Readable

You have probably visited a website where you had to squint, lean closer to the screen, or highlight text just to read it. Light gray text on a white background. Pale yellow on cream. Medium blue on dark purple. These are contrast failures, and they make content inaccessible to millions of people, not just those with visual impairments.

Contrast ratio is the mathematical relationship between the luminance (brightness) of two colors. A ratio of 1:1 means both colors are identical, so the text is invisible. A ratio of 21:1 is the maximum: pure black text on a pure white background.

The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios for text. Meeting these standards is about more than legal compliance. It is about making sure people can read what you wrote. A surprising number of popular color combinations fail these standards.

WCAG Contrast Requirements Explained

WCAG defines three conformance levels: A (minimum), AA (standard), and AAA (enhanced). Most organizations target AA, which is both achievable and meaningful.

WCAG AA requirements: - Normal text (under 18pt, or under 14pt bold): minimum ratio of 4.5:1 - Large text (18pt and above, or 14pt bold and above): minimum ratio of 3:1 - Non-text elements (icons, form borders, focus indicators): minimum ratio of 3:1

WCAG AAA requirements: - Normal text: minimum ratio of 7:1 - Large text: minimum ratio of 4.5:1

These numbers feel abstract until you start testing your own designs. That tasteful gray-on-white color scheme you liked? Probably a 2.5:1 ratio. The muted blue links that blend subtly with the body text? Possibly 3.2:1. Both fail AA for normal text.

The Contrast Checker tests any two colors instantly. Enter your text color and background color, and it shows the ratio along with pass/fail results for each WCAG level and text size. This takes the guesswork out of color pairing decisions.

A common misconception is that meeting contrast standards means your design has to look harsh or boring. It does not. There are thousands of color combinations that are both visually appealing and fully accessible. The constraint is narrower than pure aesthetic freedom, but it is nowhere near as limiting as people assume.

How Contrast Ratios Are Calculated

The contrast ratio formula uses the relative luminance of each color. Relative luminance is a measure of how bright a color appears to the human eye, weighted by how the eye perceives different wavelengths (we are more sensitive to green than to red, and more sensitive to red than to blue).

The formula: ` Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) `

Where L1 is the relative luminance of the lighter color and L2 is the darker color. Both values range from 0 (black) to 1 (white).

Relative luminance is calculated by converting the sRGB color values to linear light, then applying the luminance coefficients: ` L = 0.2126 R_linear + 0.7152 G_linear + 0.0722 * B_linear `

The 0.05 values in the formula prevent division by zero and represent the darkest color perceivable on a standard monitor.

You never need to do this math by hand. The point of understanding it is to know why some color combinations that look fine to you might fail the test. Our eyes adapt to what is on screen, compensating for low contrast in ways that make us think we are seeing more difference than actually exists. The formula measures what is objectively there, not what your adapted eyes perceive.

The Color Picker lets you explore colors and see their hex, RGB, and HSL values, which you can then plug into the contrast checker. Starting with the color picker to find your palette, then verifying with the contrast checker, is an efficient workflow.

Common Contrast Mistakes in Web Design

Certain patterns appear repeatedly in designs that fail contrast checks:

Placeholder text in form inputs. Default placeholder text is often light gray (#999 or lighter) on a white background. This typically produces a ratio around 2.8:1, well below the 4.5:1 requirement. Solutions: darken the placeholder color to at least #767676, or use floating labels that remain visible after the user starts typing.

Text over images. White text on a photo might be readable where the image is dark, but unreadable where it is light. The contrast ratio changes across the image. Solutions: add a semi-transparent overlay behind the text, add a text shadow, or place text in an opaque container.

Disabled states. Buttons and form elements in a disabled state are intentionally low-contrast to indicate they are not interactive. WCAG allows this (disabled elements are exempt from contrast requirements), but it still creates usability problems. Consider using other visual cues (strikethrough, icons) alongside reduced contrast.

Brand colors that are medium-toned. Colors like medium orange (#FF8C00), standard green (#4CAF50), or light blue (#2196F3) are often used for links, buttons, and accents. Many of these fail contrast against both white and black backgrounds. You may need a darker or lighter variant specifically for text use.

Dark mode done poorly. Dark mode is not just "invert everything." Pure white text (#FFFFFF) on pure black (#000000) has maximum contrast (21:1) but causes eye strain for many people. Off-white text (#E0E0E0) on dark gray (#1E1E1E) is typically more comfortable and still passes AAA.

The fix for most of these is straightforward: check the ratio before committing to a color combination. It takes 5 seconds in the Contrast Checker, and it saves you from accessibility failures that are embarrassing to discover after launch.

Building an Accessible Color Palette

Rather than checking contrast for every individual color combination, build a system-level palette where every pairing is pre-verified.

Start with your background colors. Most sites have 2-4 background colors: primary (usually white or near-white), secondary (slightly tinted or gray), card/surface, and dark (for dark mode or inverted sections).

For each background color, define text colors that meet contrast requirements:

1. Primary text (headings, body copy) - must meet 7:1 for AAA or 4.5:1 for AA
2. Secondary text (captions, metadata) - must meet at least 4.5:1 for AA
3. Interactive text (links, buttons) - must meet 4.5:1 for AA and be distinguishable from surrounding non-link text
4. Accent/highlight - must meet 3:1 for non-text elements

Create a contrast matrix: a table where every text color is tested against every background color. Mark each combination as pass or fail for AA and AAA. The combinations that pass become your approved pairings. The combinations that fail are removed from the design system.

This upfront work saves enormous time later because every developer on the team can pick from the approved combinations knowing they are accessible. No more last-minute contrast fixes during QA.

Use the Color Picker to explore variations of your brand colors. Darkening a brand color by 10-15% in HSL lightness often produces a version that passes contrast requirements while staying recognizably "on brand."

Testing Contrast in Practice

Automated tools catch most contrast issues, but they have blind spots.

What automated tools catch well: - Static text on solid backgrounds - Button text on button backgrounds - Form label text contrast - Icon-only buttons (if you provide the colors)

What automated tools miss: - Text over gradients (contrast varies across the gradient) - Text over images (contrast depends on image content) - Text with opacity/transparency (actual rendered contrast differs from specified colors) - Focus indicators (the outline or ring around a focused element) - Hover and active states (colors change on interaction)

For the cases automated tools miss, manual testing is necessary. The process is simple: take a screenshot of the element in its actual context, sample the colors using a color picker, and check the ratio.

Browser extensions like axe DevTools, WAVE, and Lighthouse run accessibility audits that include contrast checks. These are useful for catching issues on existing pages, but they are reactive. Checking contrast during the design phase is more efficient than fixing it after development.

For content readability beyond just color contrast, the Readability Checker analyzes text complexity, sentence length, and vocabulary level. Accessible design is about more than just visual contrast. Clear, simple language is equally important for comprehension.

FAQ

Does dark mode need different contrast ratios than light mode?

The WCAG requirements are the same regardless of mode. However, pure white text on pure black backgrounds can cause "halation" (text appears to glow or bleed) for people with astigmatism. Using slightly off-white text (#E0E0E0 to #F0F0F0) on dark gray (#121212 to #1E1E1E) is more comfortable while still exceeding AAA requirements.

Are there legal consequences for failing contrast requirements?

In many jurisdictions, yes. In the US, web accessibility lawsuits under the ADA have increased significantly. The EU's European Accessibility Act (effective 2025) requires digital services to meet WCAG 2.1 AA. Failing to meet these standards can result in lawsuits, fines, and mandatory remediation orders.

How do I fix contrast issues without changing my brand colors?

You do not need to change the brand color itself, just how you use it. If your brand blue fails contrast for body text, use it only for large headings (which have a lower threshold), buttons (where you control both text and background color), or decorative elements (not subject to text contrast rules). Use a darker variant for body text.

What about text with varying backgrounds like parallax sections?

For text that scrolls over changing backgrounds, ensure the minimum contrast is met at every point. This often means adding a semi-transparent background behind the text container, or limiting text placement to sections where the background is consistently dark or light enough.