WCAG Contrast Calculator

Check if your color combinations meet WCAG 2.1 accessibility standards

Calculate the contrast ratio between two colors and verify if they meet WCAG accessibility guidelines.

Colors

Text Color

Background Color

Resultados

Ratio de Contraste

21.00

Nivel WCAG

AAA

AAA: ≥7:1 (Excelente)

AA: ≥4.5:1 (Bueno)

AA Large: ≥3:1 (Aceptable para texto grande)

Previsualización

Tamaño del Texto: 16px

12px16px24px32px

Ejemplo de texto con los colores seleccionados

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

How it works

Color contrast is fundamental for web accessibility. WCAG (Web Content Accessibility Guidelines) establishes minimum contrast ratios to ensure content is readable for people with visual disabilities.

What is contrast ratio?

The contrast ratio is a measure that compares the relative luminance of two colors. It's expressed as a ratio (e.g., 4.5:1) where the first number represents the lighter color and the second the darker one.

WCAG Conformance Levels

Level AA (minimum recommended): 4.5:1 ratio for normal text, 3:1 for large text
Level AAA (optimal): 7:1 ratio for normal text, 4.5:1 for large text

What is considered large text?

According to WCAG, large text is at least 18pt (24px) or 14pt (18.5px) bold. Graphics and UI components require a minimum ratio of 3:1.

Contrast Formula

The ratio is calculated using the relative luminance of each color:

Ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the luminance of the lighter color and L2 of the darker one.

💡 Practical Use Cases

Case 1: Call-to-action button

You have an orange button #FF6B35 with white text. Does it meet WCAG AA?

→ Ratio: 3.2:1 ❌ Fails AA for normal text
→ Solution: Darken to #D94E1A → Ratio: 4.6:1 ✅

Case 2: Text over background image

Your hero has white text over an image. The average background color is #5A7D9A.

→ Ratio with white: 3.8:1 ⚠️ Only passes for large text
→ Add dark overlay rgba(0,0,0,0.4) to improve

Case 3: Form with placeholder

Input with white background and light gray placeholder #CCCCCC.

→ Ratio: 1.6:1 ❌ Too low
→ Use #767676 → Ratio: 4.5:1 ✅ Passes AA

Frequently Asked Questions

What contrast ratio do I need for my website?

To comply with WCAG 2.1 level AA (the minimum recommended standard), you need a 4.5:1 ratio for normal text and 3:1 for large text. For level AAA (optimal accessibility), you need 7:1 for normal text and 4.5:1 for large text.

Why is color contrast important?

Good color contrast is essential for people with visual disabilities, such as color blindness or low vision, to read your content. It also improves readability in difficult lighting conditions, like low brightness screens or direct sunlight.

Does contrast only apply to text?

No, WCAG 2.1 also requires a minimum 3:1 ratio for important graphics and UI components, such as icons, form field borders, and focus states.

How can I improve my color contrast?

You can darken the background color or lighten the text color (or vice versa). Our calculator shows you in real-time if your combination meets the standards and suggests adjustments if needed.

Is WCAG compliance mandatory?

In many countries, web accessibility is a legal requirement for government sites and businesses. Additionally, WCAG compliance improves user experience for everyone and can benefit your SEO.