Color Contrast Checker

What is color contrast?

Color contrast is the difference in luminance between two colors — most commonly between text (the foreground) and the surface behind it (the background). The higher the contrast, the easier the text is to read, especially for users with low vision, color blindness, or when the screen is viewed in bright sunlight. The Web Content Accessibility Guidelines (WCAG), published by the W3C, define precise numeric thresholds that a color pair must meet to be considered accessible. These thresholds are expressed as a contrast ratio ranging from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white).

The concept was formalised in WCAG 2.0 in 2008 and carried forward through WCAG 2.1 and 2.2. It is referenced by accessibility laws worldwide, including the Americans with Disabilities Act (ADA) in the United States and the European Accessibility Act. Designers and developers are expected to verify contrast at every stage of a project, from brand palette selection to final component QA.

When to check color contrast

Contrast checking should happen whenever a foreground color is placed on a background. Common scenarios include:

• Body text. Paragraphs, list items and form labels must meet the AA Normal threshold of 4.5:1.
• Headings and large text. Text at 18pt (24px) or 14pt bold (18.66px) only needs 3:1 under the AA Large rule.
• Buttons and links. Interactive elements must be distinguishable from surrounding content; the AA Large threshold of 3:1 is the baseline.
• Icons and UI graphics. Meaningful icons, charts and focus indicators need a 3:1 contrast against adjacent colors.
• Brand palette audits. Verify every brand color paired with every other to build a safe, reusable token set.
• Dark mode. Inverted themes often fail contrast because colors tuned for white backgrounds behave differently on dark ones.

Checking contrast early prevents costly redesigns and ensures that digital products are usable by the widest possible audience.

How the contrast ratio is calculated

The WCAG contrast ratio is derived from the relative luminance of each color. First, each RGB channel (0–255) is converted to a linear value: values at or below 0.03928 are divided by 12.92, while larger values are transformed with ((c + 0.055) / 1.055) ^ 2.4. The relative luminance L is then 0.2126 * R + 0.7152 * G + 0.0722 * B, where R, G and B are the linearised channel values and the weights reflect the human eye's sensitivity to each color. Finally, the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter and L2 the darker of the two luminances.

The 0.05 offset accounts for ambient light reflected off the screen. This formula produces a value between 1 (identical colors) and 21 (black on white). This tool performs the entire calculation in JavaScript inside your browser, so no color data ever leaves your device.

WCAG AA vs AAA thresholds

The table below summarises the four contrast thresholds checked by this tool.

Level	Text size	Required ratio
AA	Normal (< 18pt)	≥ 4.5:1
AA	Large (≥ 18pt or 14pt bold)	≥ 3:1
AAA	Normal (< 18pt)	≥ 7:1
AAA	Large (≥ 18pt or 14pt bold)	≥ 4.5:1

AA is the legal baseline in most jurisdictions; AAA is a stricter target for content where readability is critical, such as long-form articles, healthcare information and government services. Large text is held to a lower bar because larger glyphs remain legible at lower contrast.

How to check color contrast

Checking contrast with this tool takes only a second and happens entirely inside your browser. No upload, no sign-up, and no installation are required. Follow these steps:

1. Set the foreground. Use the foreground color picker or type a HEX code into the adjacent field — this represents your text color.
2. Set the background. Use the background color picker or HEX field to define the surface behind the text.
3. Read the ratio. The contrast ratio updates in real time, along with pass/fail badges for each WCAG threshold.
4. Preview the pair. The sample text box shows how the combination actually looks, so you can judge readability at a glance.
5. Copy if needed. Click "Copy Ratio" to copy the numeric ratio to your clipboard for reports or tickets.

Because every step runs locally in your browser using JavaScript, your color choices are never uploaded to a server. This makes contrast checking completely private and instant.