Feature request: high contrast mode for accessibility

[DiegoVallejoDev]

Feature request: high contrast mode for accessibility

Summary

I would like to request a feature that allows tailwindcss users to activate a high contrast mode for their websites, similar to how they can activate a dark mode with a top-level class. This would help improve the accessibility and usability of websites that use tailwindcss, especially for people with low vision or color blindness.

Motivation

According to the Web Content Accessibility Guidelines (WCAG) 2.2, the minimum contrast ratio between text and background should be 4.5:1 for normal text and 3:1 for large text¹. However, many websites do not meet this requirement, making it difficult or impossible for some users to read the content. A high contrast mode would allow users to switch to a color scheme that meets or exceeds the WCAG contrast ratio, without affecting the design or functionality of the website.

Proposed solution

A possible solution is to add a new top-level class, such as .high-contrast, that would apply a set of predefined color variables to the website elements, overriding the default or custom colors. For example:

.high-contrast {
  --text-color: #000000;
  --background-color: #ffffff;
  --link-color: #0000ff;
  /* and so on */
}

The color variables could be based on the System High Contrast Colors defined by Microsoft, or other sources of best practices for high contrast design³⁴. Alternatively, the color variables could be customizable by the user, similar to how they can customize the dark mode colors⁵.

The .high-contrast class could be toggled by the user with a button or a checkbox, or it could be automatically activated by detecting the user's system preferences or browser settings⁶.

Additional context

A high contrast mode would benefit not only users with low vision or color blindness, but also users who have difficulty reading text on certain backgrounds, such as glare, low brightness, or poor quality screens. It would also enhance the user experience in different environments, such as bright sunlight or dark rooms.

Some examples of websites that offer a high contrast mode are:

• Wikipedia: Click on the "Accessibility" link at the bottom of any page and select "High contrast".
• BBC: Click on the "Settings" icon at the top right corner of any page and select "Contrast".
• Microsoft: Click on the "Accessibility" link at the bottom of any page and select "High contrast".

I think this feature would make tailwindcss more accessible and user-friendly, and I hope you will consider implementing it. Thank you for your attention and your great work on tailwindcss.

---

(1) WCAG 2.2 - high contrast toggle button. https://stackoverflow.com/questions/57031140/wcag-2-1-high-contrast-toggle-button.
(2) . https://assistivlabs.com/assistive-tech/display/high-contrast-mode
(3) Understanding Success Criterion 1.4.3: Contrast (Minimum) | WAI | W3C. https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html.
(4) Built in "High Contrast" mode for websites to meet accessibility .... https://stackoverflow.com/questions/61325802/built-in-high-contrast-mode-for-websites-to-meet-accessibility-standards.
(5) WCAG 2.0 Accessibility and Color Contrast in a Design. https://timwright.org/blog/2016/12/17/color-contrast/.

[adamwathan]

Hey! Tailwind supports the CSS @media (prefers-contrast: more) feature which lets you specify alternate styles to use when the user has requested increased contrast via their browser or operating system configuration, take a look here:

https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-contrast

I think this is as far as it makes sense for us to go with it as a framework, as Tailwind is designed to be just a different API for writing CSS, not so much an opinionated visual styling framework like Bootstrap or something. So we just aim to expose the same functionality available to people in vanilla CSS, and leave it up to end users to decide what to do with that functionality.

[lukewarlow]

Fwiw I'm working on a web API proposal that would allow the site to implement a toggle that sets the media query value. Still early days and not everyone's convinced but see https://github.com/wicg/web-preferences-api for more information.

Like Adam said above I think the solution (as far as Tailwind should be concerned) is to use the media queries and direct your users to the relevant settings.

[lukewarlow]

@DiegoVallejoDev btw your example links don't work. Would you be able to send across the correct ones because I'm compiling a list of sites that make use of preference settings such as contrast for the above mentioned API work so any examples would be great use!

[DiegoVallejoDev]

Sure, ill send them

[lukewarlow]

As for adding system color support to TailwindCSS I've opened #11930 to discuss adding them to the default colour palette.