Contrast Checker (WCAG)

Contrast Checker (WCAG): Make Your Colors Accessible

Readability is not a matter of taste, it is measurable. The Web Content Accessibility Guidelines define a contrast ratio between foreground and background that makes text accessible. This contrast checker computes the ratio using the official sRGB luminance method and instantly checks your color combination against AA and AAA, for both normal and large text.

The thresholds are clearly defined: normal text requires at least 4.5 to 1, large text from 18 point at least 3 to 1. The AAA level demands 7 to 1 and 4.5 to 1 for large text respectively. You can find out in seconds whether your colors meet accessibility requirements.

How it works

The checker converts both colors to relative luminance based on the official WCAG sRGB method. The formula is contrast = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter and L2 the darker luminance. Example: white on black gives (1.0 + 0.05) / (0 + 0.05) = 21 to 1. Light gray on white gives a much lower ratio and may fail the AA threshold.

What it can and cannot do

The checker reliably computes the contrast ratio and tests against WCAG AA and AAA. It tells you whether your color combination meets the requirements. However, it cannot check whether the typeface itself is readable, whether the font size is sufficient, or whether the design is truly accessible in practice. The contrast ratio is only one part of accessibility.

Why local processing in the browser

All calculations run entirely in your browser. Your color values are not transmitted to or stored on a server. This means full GDPR compliance: no accounts, no sign-up, no data transmission. You can test any color combination and close the browser without leaving a trace of your work.

Creative usage ideas

• Design system building: Ensure all color combinations in your design system meet WCAG requirements.
• Accessibility audit: Systematically check existing websites for contrast problems and identify improvements.
• Brand guidelines: Verify whether your brand colors remain readable at smaller font sizes.
• Portfolio presentation: Ensure your work is accessible to all viewers regardless of their vision.
• Learning about accessibility: Understand how the WCAG contrast system works by testing different combinations.
• Teaching materials: Create examples for digital inclusion workshops and demonstrate contrast problems visually.

A small contribution to climate action

Every calculation on your device avoids a server request over the Internet. A contrast check consumes only a fraction of the energy needed for a data transfer. The International Energy Agency estimates that data centers consumed about 415 terawatt-hours in 2024, roughly 1.5 percent of global electricity demand. Using local tools reduces network traffic.

Frequently asked questions