Tinker Tools

Color Contrast Checker Instantly

Check WCAG 2.1 contrast ratios between text and background colors. All calculations are done locally in your browser—no data is sent anywhere.

Preview

Sample Text

The quick brown fox jumps over the lazy dog.

Small text example for normal size reference (14px)

WCAG 2.1 Compliance
AA Normal TextMinimum 4.5:1
PASS
AA Large TextMinimum 3:1
PASS
AAA Normal TextMinimum 7:1
PASS
AAA Large TextMinimum 4.5:1
PASS

How it works

1. Pick Colors

Choose your text (foreground) and background colors using the color pickers or enter hex values directly. Swap them with one click.

Color Pickers

2. Check Ratio

The contrast ratio is calculated instantly using the WCAG 2.1 relative luminance formula. See the exact ratio and pass/fail status for each compliance level.

Real-time

3. Ensure Accessibility

Review the WCAG AA and AAA compliance results for both normal and large text. Adjust colors until you meet the required standards for your project.

WCAG Compliant

What is Color Contrast Checking?

Color contrast checking measures how distinguishable a foreground color is from a background color. The Web Content Accessibility Guidelines — WCAG 2.1, published by the W3C — define specific contrast ratios that text and interactive elements must meet so that people with low vision or color vision deficiencies can read your content. The contrast ratio is a number between 1:1 (no contrast at all — white on white) and 21:1 (maximum contrast — black on white). WCAG Level AA requires a ratio of at least 4.5:1 for normal-sized text and 3:1 for large text. Level AAA raises those thresholds to 7:1 for normal text and 4.5:1 for large text. Large text is defined as 18pt (24px) regular weight or 14pt (18.66px) bold.

The math behind the ratio relies on relative luminance — a measure of how bright a color appears to the human visual system. The formula starts by converting each sRGB channel value to linear light. You take each 8-bit channel (0-255), divide by 255 to get a value between 0 and 1, and then apply a gamma correction: if the value is 0.04045 or below, divide by 12.92; otherwise, raise ((value + 0.055) / 1.055) to the power 2.4. This linearization step accounts for the nonlinear encoding of sRGB displays. Then you compute relative luminance as L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear. The contrast ratio between two luminance values L1 (lighter) and L2 (darker) is (L1 + 0.05) / (L2 + 0.05). Those 0.05 offsets prevent division by zero and account for ambient light reflected off the screen.

This tool calculates the contrast ratio between any two colors you provide and tells you immediately whether the pair passes WCAG AA, WCAG AAA, both, or neither — for both normal and large text. All calculations happen in your browser. You get instant feedback as you adjust colors, making it easy to iterate toward a combination that is both visually appealing and accessible to the widest possible audience.

Key Features and Benefits

  • WCAG 2.1 compliance reporting — The tool evaluates your color pair against all four WCAG thresholds: AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), and AAA large text (4.5:1). Each threshold shows a clear pass or fail indicator. You know exactly which contexts your color pair works for without memorizing any numbers.
  • Real-time ratio calculation — Change a color and the contrast ratio updates instantly. There is no submit button, no loading spinner. This immediate feedback loop lets you tweak a shade by a few HSL lightness points and see the ratio jump from 4.2:1 to 4.6:1 — crossing the AA threshold — in real time.
  • Live text preview — A preview panel renders sample text in various sizes — 12px, 16px, 18px, 24px, and 32px — using your chosen foreground and background colors. You see exactly how body copy, headings, and button labels look at each size. This visual check catches issues that a ratio number alone might not reveal, like vibrating colors that technically pass but feel uncomfortable to read.
  • Color picker and manual input — Enter colors as HEX codes, RGB values, or HSL values. A built-in color picker lets you drag around a hue-saturation-lightness space to explore options visually. If your design system gives you colors as CSS custom properties, paste the resolved value directly into the input field.
  • Swap colors button — One click swaps the foreground and background colors. This is useful when you are testing a button that uses your brand color as the background and white as the text — swap them to check the inverse case for hover states or alternate themes without retyping anything.
  • Suggested fixes for failing pairs — When a color pair fails a threshold, the tool suggests the closest passing alternative. It adjusts the foreground lightness — darkening or lightening by the minimum amount needed to reach the target ratio. You get a specific HEX value you can use immediately rather than a vague instruction to make things darker.

How to Check Color Contrast Online

  1. 1

    Enter the foreground color

    Type or paste the color you plan to use for text or icons. This is typically a dark gray or your brand's primary dark shade. You can enter it as a HEX code like #333333, an RGB value like rgb(51, 51, 51), or an HSL value like hsl(0, 0%, 20%). The color swatch updates immediately to confirm what you entered.

  2. 2

    Enter the background color

    Type or paste the background color. For most websites, this is white (#FFFFFF) or a light neutral. If you are designing a dark theme, enter your dark background — something like #121212 or #1E1E1E. The tool does not assume any default; you need to enter both colors explicitly so the calculation reflects your actual design.

  3. 3

    Read the contrast ratio

    The tool displays the computed ratio — for example, 12.63:1. Below the ratio, you see pass or fail indicators for each WCAG threshold. A ratio of 12.63:1 passes everything: AA normal, AA large, AAA normal, and AAA large. A ratio of 3.8:1 passes only AA large and fails the other three thresholds.

  4. 4

    Review the text preview

    Scroll down to the preview section. Read the sample paragraphs at different sizes. Pay special attention to 14px and 16px text — these are the most common body sizes on the web. If the text feels hard to read despite passing the ratio check, consider increasing the font weight or bumping the ratio higher. WCAG thresholds are minimums, not targets.

  5. 5

    Adjust until you pass

    If your pair fails, use the suggested fix as a starting point. The tool offers the nearest passing foreground color. You can also manually tweak the HSL lightness — drop it by 5% at a time for foreground text, or raise it by 5% for background — until the ratio crosses the threshold you need. Remember that AA is the legal minimum for many jurisdictions; AAA is the standard you should aim for whenever your design can accommodate it.

Expert Tips for Color Contrast and Accessibility

Do not rely on color alone to convey information. WCAG Success Criterion 1.4.1 states that color must not be the only visual means of communicating an action, prompting a response, or distinguishing a visual element. A form field that turns red to indicate an error is invisible to someone with protanopia — red-green color blindness affecting roughly 8% of men and 0.5% of women of Northern European descent. Always pair color with a secondary cue: an icon, a text label, an underline, or a pattern change. Contrast checking ensures text is readable, but this broader principle ensures your entire interface communicates effectively regardless of color perception.

Dark mode introduces contrast challenges that light mode does not. On a dark background, white text at maximum contrast (21:1) can cause halation — a glowing effect where bright text bleeds into the dark background, making letters appear to vibrate. People with astigmatism, which affects roughly 33% of the population, experience this more acutely. The practical fix is to use an off-white foreground like #E0E0E0 on a dark gray background like #121212 rather than pure white on pure black. This pair yields a ratio around 15:1 — well above AAA — while reducing visual strain. Test your dark mode with real users or simulate astigmatism effects by adding a slight blur to your text in a design tool.

Understand where WCAG contrast requirements apply. Body text, links, and input labels all need to meet text contrast thresholds. Non-text elements — icons, focus indicators, form field borders, chart segments — fall under WCAG 2.1 Success Criterion 1.4.11, which requires a 3:1 ratio against adjacent colors. A light gray border on a white input field that measures 1.5:1 fails this criterion. A checkbox icon that blends into its background fails it too. When checking contrast, do not stop at text. Run every meaningful UI element through the tool.

Watch out for transparency and gradients. A semi-transparent overlay or a gradient background means the effective contrast ratio changes depending on what sits behind the text. A white heading at 90% opacity on a photo could pass over a dark region and fail over a bright sky — within the same hero section. The safest approach is to place a solid or semi-opaque scrim behind text that overlaps variable backgrounds. A black scrim at 60% opacity behind white text guarantees a minimum ratio regardless of the underlying image. Calculate the effective background color by alpha-compositing the scrim over the lightest possible image pixel, then check that result against your text color. This worst-case analysis ensures your text remains readable in every scenario, not just the convenient ones.

Related Tools

Color Converter

Convert between HEX, RGB, and HSL to get the values you need for contrast testing

Color Palette Generator

Generate accessible palettes with built-in contrast considerations

Icon Color Tool

Check that icon colors meet the 3:1 non-text contrast requirement

Contrast checking is a non-negotiable step in accessible design. Roughly 2.2 billion people worldwide have some form of vision impairment, according to the World Health Organization. Even among people with typical vision, poor contrast causes eyestrain, slows reading speed, and increases error rates on forms. A contrast checker takes two seconds to use and prevents problems that affect your entire audience. Combine it with a color converter to translate values between models, a palette generator to build harmonious systems that pass AA from the start, and an icon color tool to ensure non-text elements meet their own 3:1 threshold. Accessibility is not an afterthought — it is a baseline.

Frequently Asked Questions

Recommended Tools

Image Resizer

Resize images instantly in your browser. Adjust width, height, and format with aspect ratio lock.

Image Compressor

Compress images with adjustable quality. Reduce file size while preserving visual quality.

Color Converter

Convert colors between HEX, RGB, HSL, and HSB formats with a live color preview.