One in five users struggles to read text on a screen. Whether due to a visual impairment, a poorly calibrated display, bright sunlight, or simply aging eyes, insufficient contrast between text and background is the leading cause of readability problems on the web. And yet, it is one of the simplest defects to fix.
This article explains in detail what color contrast is, how it is calculated, what standards govern it, and how to ensure your interfaces are readable by everyone. You will find practical advice, concrete examples, and the tools to verify your color choices in real time.
Why Contrast Is Fundamental
Contrast is not a secondary concern. It is the very foundation of readability. Without sufficient contrast between text and its background, content becomes inaccessible — not only for people with visual impairments, but for a large portion of the population under real-world usage conditions.
Consider a user browsing your site from a phone in bright sunlight. Or a 50-year-old whose vision has naturally declined. Or one of the 300 million people worldwide who have some form of color blindness. For each of these situations, insufficient contrast turns your site into a frustrating or even unusable experience.
In a product ecosystem like ours — Guthly, WePlanify, GuthSearch, Dropee, and GutHub — accessibility is a cross-cutting commitment. Every product must be usable by the widest possible audience, under all conditions. Contrast is the first criterion we check.
WCAG Standards Explained
What Is WCAG?
The WCAG (Web Content Accessibility Guidelines) is the international standard that defines accessibility criteria for web content. Published by the W3C, it is the reference used by legislation worldwide. The current version, WCAG 2.2, defines three levels of conformance: A, AA, and AAA.
For color contrast, the requirements are defined in success criterion 1.4.3 (Contrast Minimum) for level AA and 1.4.6 (Contrast Enhanced) for level AAA.
Level AA: The Required Minimum
Level AA is considered the minimum standard for legal compliance in most countries. It requires:
- 4.5:1 for normal-sized text (below 18px or 14px bold)
- 3:1 for large text (18px and above, or 14px bold and above)
- 3:1 for user interface components and graphical elements that convey information
This level covers the majority of needs and represents a good balance between accessibility and design flexibility.
Level AAA: Excellence in Accessibility
Level AAA is more demanding and provides better readability for a wider audience:
- 7:1 for normal-sized text
- 4.5:1 for large text
Achieving level AAA across an entire site is challenging, but it is a worthwhile goal for primary content — especially long-form text and critical information.
What Counts as "Large Text"
WCAG defines large text as text that is 24px or larger (at normal weight) or 18.66px (approximately 14pt) bold. This text benefits from lower contrast thresholds because larger characters are naturally more legible.
How Contrast Ratios Are Calculated
The contrast ratio is not a subjective measurement. It is a precise mathematical calculation based on the relative luminance of two colors.
Relative Luminance
Relative luminance measures the perceived brightness of a color, on a scale from 0 (absolute black) to 1 (absolute white). The calculation accounts for the differing sensitivity of the human eye to red, green, and blue components:
- The green component contributes 71.52% of perceived luminance
- The red component contributes 21.26%
- The blue component contributes only 7.22%
This is why blue text on a dark background is much harder to read than green text of the same intensity.
The Ratio Formula
The contrast ratio is calculated using the formula:
Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the relative luminance of the lighter color and L2 is that of the darker color. The result always falls between 1:1 (no contrast, both colors are identical) and 21:1 (maximum contrast, pure black on pure white).
Use our Contrast Checker to calculate this ratio instantly between any pair of colors. The tool displays the result in real time, along with the WCAG compliance level for both normal and large text.
Legal Requirements
In Europe
The European Web Accessibility Directive (2016/2102) requires public sector bodies to meet WCAG 2.1 level AA criteria. The European Accessibility Act (2019/882), which is being progressively implemented, extends these obligations to the private sector for certain digital products and services.
In France, the RGAA (Referentiel General d'Amelioration de l'Accessibilite) transposes these requirements with specific criteria. Companies with revenue exceeding 250 million euros are already covered, and the scope is gradually expanding.
In the United States
The ADA (Americans with Disabilities Act) is increasingly interpreted by courts as encompassing websites. The number of web accessibility lawsuits has risen dramatically in recent years. Meeting WCAG AA is generally considered the standard of compliance.
Why It Matters for Everyone
Beyond legal obligations, accessibility is a business concern. An inaccessible site excludes users, reduces potential audience, and damages brand reputation. Accessibility is not a constraint — it is an investment in quality.
Color Blindness and Contrast
Types of Color Blindness
Color blindness affects approximately 8% of men and 0.5% of women. Several forms exist:
Deuteranopia and deuteranomaly (the most common) affect green perception. Reds and greens can appear indistinguishable.
Protanopia and protanomaly affect red perception. Reds appear darker and can be confused with browns or greens.
Tritanopia (rare) affects blue perception. Blues and yellows become confused.
Impact on Contrast
Color blindness does not only reduce the ability to distinguish hues — it also modifies luminance perception. A contrast ratio that passes standard calculations may prove insufficient for a color-blind person if both colors fall within the same confusion zone.
The golden rule: never rely solely on hue to convey information. Always combine color with text, icons, patterns, or positional indicators. And maintain generous contrast ratios — aim for comfortable AA compliance rather than the bare minimum.
Practical Tips for Choosing Accessible Color Pairs
Start with Body Text
The most critical combination is your body text on your site's background. This is the pairing users will see for the longest time. Aim for a ratio of at least 7:1 for this pair — it gives you a comfortable margin for all situations.
The classics work for good reasons: dark gray text (#1e293b) on a white background, or light gray text (#f8fafc) on a very dark background (#0f172a). Our Contrast Checker offers quick combos to test these configurations in one click.
Watch Out for Medium Grays
Medium grays (#6b7280 and similar) are the most common trap. They appear visually distinct from white, but their contrast ratio is often below 4.5:1, making them non-compliant for normal text. Systematically test your secondary text, placeholders, and captions.
Accent Colors and Buttons
Bright colors (purple, blue, green) used for buttons and links must also meet contrast thresholds — both against the background and between the button text and the button color itself. A purple button (#7c3aed) with white text is a common combination, but check the ratio: it must exceed 4.5:1 for normal text.
The Swap Test
A simple test: if you swap the text and background, does the result remain legible? Our tool includes a swap button that lets you verify this instantly. If both configurations work, your color pair is robust.
Contrast in Dark Mode
A Different Challenge
Dark mode is not simply an inversion of light mode. The contrast rules remain the same, but the challenges are different:
Pure white (#ffffff) on a dark background is often too aggressive. It creates a glare effect that tires the eyes during long reading sessions. Prefer slightly muted tones like #f8fafc or #e2e8f0.
Saturated colors behave differently on dark backgrounds. A purple that works well on a white background can appear overly intense on a slate-900 background. Adjust saturation and lightness accordingly.
Borders and separators require particular attention. On dark backgrounds, the subtle gray differences that created depth in light mode can become invisible.
Test Systematically
Every color combination used in your interface must be verified in both modes. Our Contrast Checker lets you test any pair — use it to validate every couple in your design system for both light and dark modes.
Integrating Verification into Your Workflow
During Design
Check contrast during the design phase, not at the end of the project. Every time you select a text or background color, test the ratio immediately. It is far easier to correct a color choice during design than after development.
During Development
Integrate contrast verification into your code reviews. When a developer introduces a new color or modifies an existing style, the contrast ratio should be verified. Automated tools like Lighthouse or axe can detect the most obvious violations, but manual verification with our Contrast Checker remains necessary for subtle cases.
The Exported CSS Code
The tool generates the corresponding CSS and Tailwind code for your color pair, with the contrast ratio included as a comment. This lets you document your choices directly in the code:
color: #f8fafc;
background-color: #0f172a;
/* Contrast ratio: 17.28:1 */
/* WCAG Normal text: AAA */
/* WCAG Large text: AAA */
This inline documentation makes maintenance and code review easier.
Contrast Across a Product Ecosystem
When you manage multiple interconnected products, contrast management takes on an additional dimension. Each product has its own accent colors, but every text-to-background combination must meet the same thresholds.
At Eguth, we apply a simple policy: no color combination in production falls below level AA. Whether on Guthly for personal growth, WePlanify for travel planning, GuthSearch for AI-augmented search, Dropee for gamified learning, or GutHub as the central hub — every text, every button, every informational icon meets contrast standards.
This consistency is not a luxury. It is what allows any user to move between products without ever encountering a readability problem.
Common Mistakes to Avoid
Light gray text on a white background is the most widespread error. It is aesthetically trendy but often non-compliant. A gray of #9ca3af on white produces a ratio of only 2.86:1 — far below the threshold.
Overly light placeholders in form fields are almost always non-compliant. Most frameworks use grays that are too light by default. Check and adjust systematically.
Ignoring interactive states: the hover, focus, and disabled states of your components must also meet contrast thresholds. A link that becomes unreadable on hover is an accessibility problem.
Relying on perception rather than measurement. The human eye is a poor judge of contrast — two colors that seem sufficiently distinct on your high-resolution display in a well-lit office may be indistinguishable on a phone screen in bright sunlight.
Conclusion
Contrast is not a finishing detail. It is a fundamental of design that determines whether your content is truly accessible to your audience. WCAG standards provide clear, measurable thresholds, and the tools to verify them are within reach.
Adopting a rigorous approach to contrast improves the experience for all your users — not just those with visual impairments. Sufficient contrast means better readability in all conditions, reduced eye strain, and a more professional interface.
Test your color combinations with our Contrast Checker. Choose your text and background colors, verify the ratio in real time, and export the corresponding CSS or Tailwind code. In a few seconds, you will know whether your choices meet the standards — and your users will thank you for it.