Verificador de Contraste de Color

A Color Contrast Checker is an essential accessibility utility for web developers, designers, and Technical SEOs. It calculates the mathematical difference in "Luminance" between a background color and a foreground (text) color. Ensuring high contrast isn't just a design choice—it's a legal requirement in many regions and a fundamental part of the Web Content Accessibility Guidelines (WCAG).

The checking engine evaluates your design through a rigorous 3-step validation pipeline:

1. Relative Luminance Calculation: The tool converts your Hex/RGB/HSL colors into a "Linear" value that represents how bright a color looks to the human eye. The formula (defined by the W3C) gives more "Weight" to Green than to Blue because the human eye is more sensitive to green light.
2. Contrast Ratio Generation: The engine compares the two luminance values. The ratio ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, pure black vs pure white).
3. WCAG Threshold Mapping: The tool matches your ratio against the official compliance levels:
   • Level AA: Requires a ratio of 4.5:1 for normal text and 3:1 for large text.
   • Level AAA: The "Gold Standard" for maximum accessibility, requiring 7:1 for normal text and 4.5:1 for large text.
4. Real-Time Simulation: The tool provides live previews of text on the background, along with Color Blindness Simulations (Protanopia, Deuteranopia, etc.) to show how the contrast feels to all users.

The History of Digital Accessibility and the WCAG

The first formal guidelines for web accessibility (WCAG 1.0) were published in 1999 by the World Wide Web Consortium (W3C).

However, the "Mathematical Contrast" formula we use today was refined in WCAG 2.0 (2008). It was developed to provide a "Verifiable" way to ensure that the roughly 285 million people worldwide with vision impairments could actually read the web. Today, large organizations like the UK Government (GDS) and the US Federal Government (Section 508) mandate that all public websites pass the "Contrast Test" as a part of their Brand Standards.

Technical Comparison: AA vs. AAA Compliance

Knowing your target audience determines which compliance level you should aim for.

By using a dedicated Color Contrast Checker, you fulfill your Inclusive Design responsibilities while avoiding legal risks.

Security and Performance Considerations

Checking contrast is a "Pure Logic" task with zero risk to your infrastructure:

• Zero Performance Load: Calculating the luminance of two colors takes less than 0.1ms. You can run thousands of checks per second without impacting the Browser's Main Thread.
• Legally Defensible: By keeping a record of your "Passing" contrast scores, you can demonstrate compliance during accessibility audits or legal challenges.
• Dynamic Adjusting: Modern sites use CSS Custom Properties to automatically adjust contrast if a user enables an "Accessibility Mode."
• Client-Side Privacy: To maintain your absolute Data Privacy, the entire contrast math and simulation logic happens locally in your browser. Your private brand colors and staging UI designs are never sent to our servers.

How It's Tested

We provide a high-fidelity engine that is verified against the W3C Contrast Algorithm.

1. The "Black/White" Test:
   • Action: Input #FFFFFF (White) and #000000 (Black).
   • Expected: Must return exactly 21.0:1 (Pass AAA).
2. The "Same Color" Pass:
   • Action: Input identical colors for both.
   • Expected: Must return 1.0:1 (Fail).
3. The "Inversion" Check:
   • Action: Swap background and foreground colors.
   • Expected: The ratio remains identical (Proven by Commutative Logic).
4. The "RGB to Luminance" Check:
   • Action: Input pure Green (#00FF00).
   • Expected: Returns a much higher relative luminance than pure Blue (#0000FF), validating the Eye-Sensitivity Model.