Color Selection

Normal text with current colors
Large text with current colors

This Space Is Lonely

Got something cool to share? This could be your spot. Let's chat.

Sponsored

WCAG Compliance Results

4.5:1
Contrast Ratio

Graphics / Icons

AA PASS
WCAG AA

Normal Text

AA PASS
WCAG AA
AAA FAIL
WCAG AAA

Large Text

AA PASS
WCAG AA
AAA FAIL
WCAG AAA
Color Blindness Simulation
Color Palettes
Bulk Testing
Tips

How your colors appear to people with different types of color vision

Normal Vision

Sample Text
Standard color perception

Protanopia

Sample Text
Red-blind

Deuteranopia

Sample Text
Green-blind

Tritanopia

Sample Text
Blue-blind

Protanomaly

Sample Text
Red-weak

Deuteranomaly

Sample Text
Green-weak

Tritanomaly

Sample Text
Blue-weak

Achromatopsia

Sample Text
Complete color blindness

Age-Related Changes

Lens yellowing (60+ years)

Bulk Color Testing

Suggested Color Palettes

Below are suggested color palettes based on the colors you provided above.

Scores are calculated based on the text color provided above and the following palette background colors.

Making the Web Accessible for Everyone

Welcome to Who Can See It?, your all-in-one color contrast accessibility tool. This app is designed to help web designers and developers create more inclusive experiences by ensuring that text and graphical elements are easily readable for everyone, including people with visual impairments or color vision deficiencies. Adhering to the Web Content Accessibility Guidelines (WCAG) isn't just about compliance; it's about making the web better for all users.

How to Use the Tool: A Simple Guide

Getting started is easy. Follow these steps to test your color combinations:

  • Step 1: Select Your Colors: In the "Color Selection" section, enter your desired foreground (text) and background colors. You can use the color picker or type in a hex code directly.
  • Step 2: Review Instant Results: The tool immediately calculates the contrast ratio and shows you the WCAG 2.1 compliance status (AA or AAA) for normal text, large text, and non-text elements like icons and graphics.
  • Step 3: Explore Advanced Features: Use the tabs above to dive deeper. Simulate how your colors appear to people with different types of color blindness, generate accessible color palettes, or perform bulk testing on many color combinations at once.

Why Color Contrast Matters

Good color contrast is a cornerstone of accessible and user-friendly design. It ensures that your content is legible for users with low vision, age-related vision loss, and various forms of color blindness (like Protanopia and Deuteranopia). By meeting WCAG AA and AAA standards, you improve your site's overall user experience (UX) and broaden your audience.

Key Features at a Glance:

  • Real-time WCAG Compliance Check: Instantly see if your colors pass AA and AAA levels for text and graphics.
  • Color Blindness Simulator: Visualize your design through the eyes of users with 8 different types of color vision deficiencies.
  • Accessible Palette Generator: Create full, accessible color palettes based on your initial color choices.
  • Bulk Contrast Tester: Analyze dozens of color combinations simultaneously to validate an entire design system.