[csswg-drafts] [mediaqueries] CSS Media Feature for Color Vision Adjustments (#10335)

na-pel has just created a new issue for https://github.com/w3c/csswg-drafts:

== [mediaqueries] CSS Media Feature for Color Vision Adjustments  ==
# CSS Media Feature for Color Vision Adjustments

## Abstract

This proposal introduces a new CSS media feature `color-vision-adjustment` to enhance web accessibility for users with color vision deficiencies. By allowing developers to define specific styles for different types of color vision impairments, this feature aims to create a more inclusive web experience.

## 1. Introduction and Problem Statement

### Introduction

Color vision deficiencies, commonly known as color blindness, affect a significant portion of the population, with approximately 8% of men and 0.5% of women of Northern European descent affected. These deficiencies can lead to difficulties in distinguishing certain colors, which can severely impact the usability and accessibility of web content.

### Problem Statement

Individuals with color vision deficiencies often struggle to differentiate between colors that are easily distinguishable to those with typical color vision. This can result in challenges when interacting with websites, particularly those that rely heavily on color cues for navigation, information, and actions. Current web development practices do not adequately address the needs of users with color vision impairments, leading to a suboptimal and often frustrating user experience.

To address this issue, we propose the introduction of a new CSS media feature, `color-vision-adjustment`, which will allow developers to specify styles tailored to different types of color vision deficiencies. This feature will enable the creation of more accessible and user-friendly websites, ensuring that all users, regardless of their color vision capabilities, can effectively navigate and interact with web content.

Adopting this proposal will provide two levels of color vision support:

1. **Built-in Browser Support:** Browsers will include built-in support for color vision adjustments within their default style sheets. This will immediately improve accessibility for many users without requiring any changes to existing HTML or CSS.

2. **Customizable Developer Support:** Developers will have the ability to override and enhance the built-in adjustments using the `color-vision-adjustment` media feature. This will allow for fine-tuned accessibility improvements tailored to specific color vision deficiencies, ensuring that all users can effectively navigate and interact with web content.

## 2. Proposed Solution

### Overview

The proposed solution involves introducing a new CSS media feature, `color-vision-adjustment`, that allows developers to specify styles tailored to various types of color vision deficiencies. This feature will work similarly to existing media features like `prefers-color-scheme`, providing an easy way for developers to create accessible web content for users with color vision impairments.

### Syntax and Values

The `color-vision-adjustment` media feature will support the following values:

- `normal` (default): No color vision adjustment.
- `protanopia`: Adjustment for protanopia (red-blindness).
- `protanomaly`: Adjustment for protanomaly (red-weakness).
- `deuteranopia`: Adjustment for deuteranopia (green-blindness).
- `deuteranomaly`: Adjustment for deuteranomaly (green-weakness).
- `tritanopia`: Adjustment for tritanopia (blue-blindness).
- `tritanomaly`: Adjustment for tritanomaly (blue-weakness).
- `achromatopsia`: Adjustment for achromatopsia (total color blindness).
- `red-green-blindness`: Generic adjustment for red-green color blindness (protanopia, protanomaly, deuteranopia, and deuteranomaly).
- `blue-yellow-blindness`: Generic adjustment for blue-yellow color blindness (tritanopia and tritanomaly).
- `active`: Any color vision adjustment mode except `normal`.
- `any`: Any color vision adjustment mode, including `normal`.

For additional information about different color vision impairments please see https://en.wikipedia.org/wiki/Color_blindness.

Developers can use these values to define specific styles for different types of color vision impairments. For example:

```css
/* Default styles */
body {
    color: green;
}

/* Specific adjustments for red-green color blindness */
@media (color-vision-adjustment: red-green-blindness) {
    body {
        color: blue;
    }
}
```

### Fallback Mechanism

In browsers that do not support the `color-vision-adjustment` media feature, the default styles will be applied. This ensures that the website remains functional and accessible even without specific color vision adjustments. Developers can also use standard CSS rules outside of the `@media` queries to provide a baseline level of accessibility. For example, a developer can write dedicated CSS rules for color vision impaired users outside the `@media` section, and then append a `@media (color-vision-adjustment: normal)` section for people with normal color vision. This way, if the user uses a browser that does not support the standard, the fallback version will be suited for color vision impaired users.

## 3. Benefits

### Immediate Accessibility Improvements

By integrating built-in support for color vision adjustments within browser default style sheets, users will experience immediate improvements in accessibility without requiring any changes to existing websites. This built-in support will automatically adjust colors based on user preferences, making web content more accessible to a wider audience.

### Customizable Developer Enhancements

Developers will have the ability to override and enhance the built-in adjustments using the `color-vision-adjustment` media feature. This allows for fine-tuned accessibility improvements tailored to specific color vision deficiencies, ensuring that all users can effectively navigate and interact with web content.

### Increased Awareness and Inclusivity

Implementing this feature will raise awareness about color vision deficiencies and promote inclusive design practices. By providing tools that make it easier to accommodate users with different needs, the web development community can create more inclusive and user-friendly websites.

## 4. Implementation Examples

### Example 1: Basic Usage

A website might use the `color-vision-adjustment` media feature to adjust the color scheme for users with red-green color blindness:

```css
/* Default style */
body {
    background-color: white;
    color: green;
}

.warning {
    color: red;
}

/* Red-green color blindness adjusted style */
@media (color-vision-adjustment: red-green-blindness) {
    body {
        color: blue;
    }
    .warning {
        color: orange;
        font-weight: bold;
    }
}
```

### Example 2: Enhanced Accessibility

A website might provide enhanced visual cues for users with any type of color vision deficiency:

```css
/* Default styles */
.status-success {
    color: green;
}

.status-error {
    color: red;
}

/* Enhanced cues for any color vision deficiency */
@media (color-vision-adjustment: active) {
    .status-success::before {
        content: '✔ '; /* Check mark */
    }

    .status-error::before {
        content: '✘ '; /* Cross mark */
    }
}
```

## 5. Conclusion

The `color-vision-adjustment` media feature represents a significant step forward in making the web more accessible for users with color vision deficiencies. By providing both built-in browser support and customizable options for developers, this feature will help create a more inclusive and user-friendly web experience. We urge the CSS Working Group and browser vendors to consider this proposal and work towards its implementation, ensuring that all users can benefit from a more accessible web.






Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10335 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 14 May 2024 20:36:43 UTC