Rankite
ServicesResultsToolsTeamAboutBlogCareersContactFree SEO Audit
Free tool

Color Contrast Checker: WCAG AA and AAA Pass or Fail

Enter a text color and a background color to get the exact WCAG contrast ratio, with a live preview and a pass or fail against AA and AAA thresholds, free.

Home / Tools / Color Contrast Checker
The quick brown fox jumps over the lazy dog
Contrast ratio
-
AA normal text (4.5:1)
-
AA large text (3:1)
-
AAA normal text (7:1)
-
AAA large text (4.5:1)
-

Built by Rankite, the SEO team behind Swordfish AI's +400% revenue and Zluri's +45% organic growth. See the case studies

Color contrast ratio measures how easily text stands out from its background, calculated from the relative brightness of the two colors using the formula in the Web Content Accessibility Guidelines (WCAG). Low contrast text is hard to read for anyone in bright sunlight or on a low quality screen, and it is a hard blocker for users with low vision or color blindness. This tool takes any two hex colors, calculates the exact ratio, and checks it against the WCAG AA and AAA thresholds.

How the contrast ratio is calculated

WCAG defines contrast ratio using relative luminance, a measure of how bright a color appears based on its red, green and blue channels. Each channel is converted from its 0 to 255 value into a linear value, weighted (green contributes the most to perceived brightness, blue the least) and summed into a single luminance number between 0 (black) and 1 (white). The contrast ratio is then the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. Pure black on pure white produces the maximum possible ratio of 21 to 1.

WCAG AA and AAA thresholds

WCAG sets different minimums depending on text size. Normal text needs at least 4.5 to 1 for AA compliance and 7 to 1 for the stricter AAA level. Large text, defined as 18 point (24px) or bigger, or 14 point (18.5px) bold or bigger, gets a lower bar because bigger strokes are easier to read at lower contrast: 3 to 1 for AA and 4.5 to 1 for AAA. Most teams target AA as the practical baseline, since AAA is difficult to hit with brand colors and is not required for most content.

Why contrast matters beyond compliance

Contrast is not a direct Google ranking factor, but it shows up in accessibility audits inside tools like Lighthouse, and poor contrast increases the chance a visitor bounces before reading your content, which does show up in engagement signals. It is also a legal exposure point: businesses in several countries have faced accessibility complaints and lawsuits over sites that fail basic contrast and screen reader requirements. Checking your body text, buttons and links against AA is a cheap way to reduce that risk while making the page easier to use for everyone.

Accessible design and search visibility usually point the same direction: a page that is easy to read is a page people stay on. If you want a full technical and content review, not just contrast, request a free SEO audit and we will show you what else is worth fixing first.

Related articles

FAQ

Color Contrast Checker: questions, answered

What is a good contrast ratio?
For normal body text, aim for at least 4.5 to 1 to meet WCAG AA, which is the level most accessibility guidelines and legal standards reference. For large headings and big buttons, 3 to 1 is the accepted minimum. Going above these numbers only helps, so when in doubt use a darker or lighter shade than your first choice.
What is the difference between AA and AAA?
AA is the widely adopted baseline, requiring 4.5 to 1 for normal text and 3 to 1 for large text. AAA is the stricter, optional level, requiring 7 to 1 for normal text and 4.5 to 1 for large text. Most websites target AA because AAA is genuinely hard to hit with typical brand colors without turning everything into pure black on white.
What counts as large text under WCAG?
Large text is defined as at least 18 point font, which is about 24 pixels, or at least 14 point bold, which is about 18.5 pixels bold. Anything smaller than that is treated as normal text and held to the stricter 4.5 to 1 AA minimum rather than the 3 to 1 minimum for large text.
Does it matter which color is text and which is background?
No, the contrast ratio formula is symmetrical, so swapping which color is text and which is background gives the exact same ratio. What does matter is entering the actual pair you plan to use together, since a color that passes against white might fail against your brand's off-white or tinted background.
Is failing color contrast a legal risk?
It can be. Several countries enforce accessibility standards based on WCAG for public-facing websites, and businesses have faced complaints and lawsuits over inaccessible sites, contrast included. Passing AA on your main body text, links and buttons is a low-cost way to reduce that exposure.
Does contrast affect SEO rankings?
Not directly. Google has not confirmed contrast as a ranking factor, but it is scored in Lighthouse accessibility audits, and poor readability can increase bounce rate, which is an indirect signal search engines do pick up on through user behavior. Treat it as a usability fix with a possible SEO side benefit, not a guaranteed ranking boost.

More free tools

Let's grow

Ready to own page one?

Get a free, no-obligation SEO audit and a 30-minute strategy session. We'll show you exactly where the growth is hiding.

Book your free audit Explore services
Get in touch

Tell us about your project

Fill out the form and we'll get back to you within one business day. Prefer email? Write to us directly at contact@rankite.com.

Or copy our email and write to us directly: contact@rankite.com