Check a text and background pair before publishing
Enter the exact foreground and background colors from a design to see the measured contrast ratio and which WCAG thresholds the pair meets.
Color Contrast Checker
Free, no signup. Compare foreground and background colors against WCAG 2.2 AA and AAA, get the closest practical hex alternatives that pass, or check a live URL's real rendered contrast.
Check a URL's rendered contrast
Loads the page in a metered headless browser and runs axe-core's color-contrast rule against the real computed styles — the resolved foreground, background, opacity, inherited color, and CSS variables after the cascade, not a static-HTML color guess. This is the same Browser-Rendering pipeline the AccessibilityWeb accessibility means designing sites so people with disabilities can use them, per the W3C's WCAG guidelines. It overlaps with SEO in specific, checkable ways — alt text, heading structure, descriptive link text, captions, and page speed all serve both audiences — but Google has said accessibility itself is not a ranking factor, and most WCAG success criteria (keyboard focus order, ARIA live regions, form labels) have no SEO effect at all. Tester uses, filtered to just contrast findings.
Checks run from our server; we fetch the URL you enter and don't keep the results. This launches a metered browser audit shared with the Accessibility Tester's rendering budget, so it is rate-limited per visitor and per target site. Anonymous run-level outcome counters may be used for aggregate research; URLs, domains, IPs, and identifiers are never included, and no statistic is released below 100 runs.
The quick brown fox jumps over the lazy dog.Large text and UI components use the lower 3:1 AA threshold.
Runs entirely in your browser — nothing you paste is uploaded or stored. Anonymous run-level outcome counters may be used for aggregate research; URLs, domains, IPs, and identifiers are never included, and no statistic is released below 100 runs.
Palette audit
Paste CSS variables, token declarations, or a hex list. The matrix checks every color as text against every other color as a background.
Site passport Local context for this saved site
Local data
Saved targets, named lists, and recent check summaries remain only in this browser.
Rate this tool
Example
Example data — engine-verified result
#777777 foreground on #FFFFFF: 4.48:1
- Pass: AA large text and UI (3:1).
- Below: AA normal text and AAA large text (4.5:1), plus AAA normal text (7:1).
- Nearest AA normal-text alternative:
#767676, one step darker, at 4.54:1.
How it works
Paste mode calculates contrast from the WCAG relative-luminance formula, not by simply comparing RGB values. The suggestions preserve the foreground hue and saturation while walking its lightness toward the nearest passing color, then verify the rounded hex result. The URL mode above instead loads the page in a metered headless browser and reads each element's actual computed color and background after the CSS cascade resolves — the only way to catch contrast failures caused by inherited color, semi-transparent backgrounds, CSS variables, or the browser's default stylesheet, none of which a pasted color list can see.
Use the right rule
Normal-size text needs 4.5:1 for AA. Large text (at least 24px regular or 18.66px bold) and non-text UI indicators need 3:1. Color should never be the only way to communicate a state.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text and non-text UI components. AAA requires 7:1 for normal text and 4.5:1 for large text.
Does this prove my page is accessible?
No. It checks color pairs, not typography, focus states, images of text, or (in paste mode) real rendered backgrounds. Treat it as a design-time check and test the finished interface too.
Where does my palette go?
In paste mode it stays in the browser — paste CSS custom properties, Tailwind-style name/value tokens, or a loose list of hex colors. Only the URL mode sends anything to our server, and that is the public page address you enter, not a palette.
How is the URL mode different from pasting colors?
Pasted colors give you exact math on the pair you type. The URL mode loads the real page in a metered headless browser and reads each element's actual computed color and background after the CSS cascade, inheritance, opacity, and browser defaults are resolved — the only way to get a genuine contrast verdict for a live page, since a static-HTML color guess can be wrong.
Feature requests for Color Contrast Checker
Upvote what you want most. New ideas can be submitted from the floating Feedback menu; requests appear here once approved, and the most-wanted rise to the top.
You won't be emailed about that request anymore.
Loading…
➕ Request a feature
New requests are reviewed before they appear here.
Where this tool helps
Common use cases
Choose the correct threshold for the element
Compare the same pair against normal text, large text, and non-text interface requirements instead of treating every element as if it used one rule.
Find a nearby color that passes
Use the nearest passing foreground suggestion as a practical starting point, then confirm the updated pair in the finished design.
Audit a CSS or design-token palette
Paste CSS variables, named tokens, or hex colors to compare every foreground and background direction and find combinations that miss the selected threshold.
Check a live page after styles are rendered
Run the URL mode to inspect computed foreground and background colors after CSS variables, inheritance, opacity, and the browser cascade have been applied.
Watch the full workflow
Color Contrast Checker walkthrough
Read the transcript
Color Contrast Checker
This beginner walkthrough shows how Color Contrast Checker helps you find hard-to-read color combinations before they reach users. We will test one text and background pair, interpret the Web Content Accessibility Guidelines thresholds, find a nearby passing color, audit a small CSS palette, check a rendered page, and finish with the limits that still require human review.
Step 1
Color contrast describes the visible difference between a foreground color, such as text or an icon, and the background behind it. This tool has two paths. The local path checks exact color pairs and pasted palettes in your browser. The URL path loads one public page in a metered browser so it can inspect the colors after the page’s styles have actually been applied.
Step 2
Use it to check a text and background pair before publishing, choose the correct threshold for the element, find a nearby passing color, audit a CSS or design-token palette, or inspect a live page after its styles are rendered. My favorite workflow is to use the local pair while designing, then run the rendered-page check after implementation so the design value and the real browser result can be compared.
Step 3
The selected tab is "Paste CSS/colors". The foreground controls sit on the left, the background controls sit on the right, and "Swap" reverses their roles. The sample updates immediately. Beneath it, the large number is the contrast ratio, the colored chips show each rule, and the suggestion gives a nearby foreground when normal text misses double A.
Step 4
A contrast ratio runs from one to one, where the colors are effectively identical, up to twenty-one to one for black and white. A larger number means more contrast, but the result is not simply good or bad without context. Normal text needs four point five to one for Web Content Accessibility Guidelines double A. Large text and essential non-text interface indicators use the lower three-to-one threshold shown here.
Step 5
The default pair is hex color "#777777" on white. Its measured ratio is four point four eight to one. That is just below the four point five threshold for normal-size text, so the double-A and triple-A normal-text chips say "Below". The same pair passes the three-to-one rules for qualifying large text and non-text interface components. The element’s size and purpose determine which result applies.
Step 6
The nearest double-A normal-text alternative is "#767676", one step darker, at four point five four to one. That is useful because it changes the original gray as little as possible. Treat it as a practical starting point, not automatic approval. Recheck hover, focus, disabled, selected, and dark-mode states, and make sure the adjusted color still fits the design system.
Step 7
Now replace the foreground with "#1F2937", a dark slate color. The sample updates to fourteen point six eight to one, and every displayed rule now says "Pass". The suggestion also changes to explain that the pair already passes double A for normal text. This is the quickest design loop: enter the real colors, read the applicable rule, adjust one value, and confirm the new result.
Step 9
The palette audit is for a small set of CSS variables, design tokens, or loose hex colors. A token is simply a reusable name such as ink, paper, muted, or brand. The tool compares every color as a foreground against every color as a background. The direction matters to the report because the same colors may be assigned different jobs, even though the numeric ratio for a pair is the same in reverse.
Step 10
Paste four fictional variables, then leave the rule on "AA normal text" and choose "Audit palette". The tool extracts the unique colors and creates the matrix immediately in the browser. This example uses dark ink, white paper, a muted gray, and a green brand color. No palette data is uploaded, which makes this mode useful during design-system and code review.
Step 11
The summary says four unique colors and six directional pairs do not meet double A. Rows are foreground text; columns are backgrounds. Green cells meet four point five to one, red cells do not, and the diagonal is a dash because a color against itself is always one to one. Start with the combinations the product actually uses. A matrix is an exploration aid, not a requirement to approve every possible pairing.
Step 12
Change the rule to "AAA normal text" and run the audit again. The required ratio rises to seven to one, so this palette now has ten directional failures instead of six. Triple A is intentionally stricter. Choose it when that conformance target applies; otherwise, do not turn the largest available number into a made-up universal requirement.
Step 13
The button labelled "Copy CSS variables" creates a normalized root block from the parsed colors. That gives a reviewer a clean handoff for a stylesheet, ticket, or design-system discussion. Keep the matrix result with the intended foreground and background roles, the selected threshold, and any adjusted values so the next person can reproduce the decision.
Step 14
Choose the tab labelled "Check a URL" when pasted colors are not enough. The server loads the public page in a browser and runs the color-contrast rule against computed styles. That matters when inheritance, opacity, semi-transparent backgrounds, CSS variables, or browser defaults change the final pair. This mode sends the public page address to the server and is rate-limited; it does not upload your local palette.
Step 15
The example uses contrast-demo dot example dot test, a reserved fictional address. Choose "Check contrast". The fixed report opens below the input and says one color-contrast rule was found in eight hundred forty-two milliseconds. In production, a result can change with page content, themes, consent choices, interaction states, and timing, so save the page state and check time with the finding.
Step 16
The serious card contains one rule affecting two elements. Each row gives a selector, which is the developer-facing address of the element, a short HTML excerpt, the observed ratio, and the expected four point five to one threshold. The shipping note measured two point eight four to one, and the secondary action measured three point two one. Adjust the actual foreground or background, rerun the page, and verify the relevant states.
Step 17
Use the rule that matches the real element. Normal-size text needs four point five to one for double A and seven to one for triple A. Qualifying large text uses three to one for double A and four point five to one for triple A. Essential icons, focus indicators, control boundaries, and graphical objects generally use three to one against adjacent colors. Color should also never be the only way a state or instruction is communicated.
Step 18
A passing pair does not prove that a page is accessible. Paste mode cannot see typography, images of text, gradients, layered or changing backgrounds, or the real rendered state. URL mode checks the state its browser reached, not every menu, dialog, theme, focus state, or authenticated screen. After a repair, rerun the exact pair and the page, then test the complete task with real content, keyboard use, zoom, assistive technology, and people.
Measure the pair. Fix the design. Verify the finished experience.
Start with the exact foreground and background colors, choose the rule that matches the element, and keep the measured ratio with the repair. Then test the finished page in every important state. Color Contrast Checker gives you precise evidence and practical alternatives, while the final accessibility judgment still belongs to the complete user experience.
Common issues & how to fix them
- Error Color pair fails WCAG AA for normal text Fix: Change the foreground or background until normal text reaches at least 4.5:1 contrast, then retest hover, focus, disabled, and visited states.
- Error Color pair fails WCAG AA for large text Fix: Change the color pair until text at least 24px regular or 18.66px bold reaches 3:1 contrast.
- Warning Color pair fails WCAG AAA for normal text Fix: Adjust the color pair until normal text reaches 7:1 contrast when AAA is the project requirement.
- Warning Color pair fails WCAG AAA for large text Fix: Adjust the color pair until qualifying large text reaches 4.5:1 contrast when AAA is required.
- Warning Color pair fails non-text contrast guidance Fix: Raise the contrast of essential icons, focus indicators, control boundaries, and graphical objects to at least 3:1 against adjacent colors.