Accessible Design is Good Design.

This text demonstrates the contrast between your selected foreground and background. Hyperlinks typically need distinction. Ensure that your content is readable by everyone, everywhere.

Vision Simulator

Recent Checks

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

Accessibility is not an aesthetic choice; it is a functional imperative and a legal requirement under frameworks like the ADA and Section 508. This tool provides a rigorous algorithmic assessment of color pairs against the Web Content Accessibility Guidelines (WCAG) 2.1. It utilizes the relative luminance formula to determine the precise contrast ratio, ensuring text and interactive elements remain legible for users with varying visual capabilities.

Unlike basic checkers, this engine includes a Vision Simulator to model Protanopia, Deuteranopia, and Tritanopia, and an Auto-Remediation system that mathematically calculates the nearest compliant color values. Use this tool to mitigate legal risk, improve SEO by reducing bounce rates, and ensure universal usability across your digital infrastructure.

Formulas

The WCAG contrast ratio is derived from the relative luminance of the foreground and background colors. Luminance is calculated using linearized RGB values.

1. Calculate Relative Luminance (L):

{

C/12.92 if C ≤ 0.03928((C+0.055)/1.055)^2.4 otherwise

Then apply the weighted sum for sRGB:

L = 0.2126R + 0.7152G + 0.0722B

2. Calculate Contrast Ratio (CR):

CR = L₁ + 0.05L₂ + 0.05

Where L₁ is the luminance of the lighter color and L₂ is the luminance of the darker color.

Reference Data

Level	Component	Ratio	Requirement
AA	Normal Text	4.5:1	Minimum for standard body text (< 18pt).
AA	Large Text	3.0:1	Minimum for bold (≥ 14pt) or large (≥ 18pt).
AA	UI Components	3.0:1	Input borders, icons, and focus states.
AAA	Normal Text	7.0:1	Enhanced contrast for maximum readability.
AAA	Large Text	4.5:1	Enhanced contrast for headlines.
Incidental	Inactive/Decorative	None	Disabled inputs or purely decorative elements.

Frequently Asked Questions

The 0.05 offset serves as a "flare correction" factor. It simulates the ambient light reflecting off a standard screen, ensuring that the ratio doesn't approach infinity when comparing against pure black (luminance 0).

WCAG compliance is strictly calculated against an opaque background. If you use transparency, you must "flatten" the color against the matte color (usually white or the container background) to determine the true effective contrast ratio.

Pure red has a low relative luminance (approx 0.21) because the human eye is less sensitive to red than green. Even though it looks bright, mathematically it does not provide enough separation from black (0.0) to meet the 4.5:1 ratio.

No. According to WCAG Success Criteria 1.4.3 (Exception), text that is part of a logo or brand name has no minimum contrast requirement. However, it is best practice to ensure legibility.

It applies a color transformation matrix (based on the Machado et al. algorithm) to the RGB vectors of your selected colors, mathematically simulating how cones in the eye perceive light for Protanopia, Deuteranopia, and Tritanopia.