What are some ways to offer a visually striking high contrast option for a pastel color palette that is also easily

Question

What are some ways to offer a visually striking high contrast option for a pastel color palette that is also easily

Is there a way to balance a website's color theme with high contrast options while still leaning towards a pastel, low-contrast design unless specifically requested by the user? How can we ensure compliance with minimum contrast requirements outlined in WCAG 2 guidelines?

I attempted to establish a fallback theme with higher contrast and provide a lower contrast version for users who do not require enhanced contrast, utilizing the prefers-contrast media query. However, my example (also available on codepen here) failed an accessibility audit due to a foreground color of #eeeeee against a background color of #f26600 resulting in a low contrast ratio of 2.71.

What CSS modifications are necessary to establish a suitable fallback option? How can users communicate their contrast preferences, and is it possible for browsers or operating systems to adjust contrast settings based on various factors such as daylight, dark/light themes, or ambient light sensors?

p {
  background-color: #f26600;
  color: #eeeeee;
}

@media (prefers-contrast: more) {
  p {
    background-color: #aa3300;
    color: #ffffff;
  }
}

I also endeavored to invert the logic in the code snippet to prioritize high contrast as the default instead of vice versa: see codepen.io/openmindculture/pen/eYVPgoo. While this version passed without contrast warnings, will it ever display the pastel version? How can I indicate a preference for less contrast, and how can this be reflected to the user?

css user-interface colors accessibility

Answer 1

Answer №1

That’s a truly thought-provoking question.

Introducing an Alternative Contrast Variation

Including a control with adequate contrast ratio for users to switch to a display with ample contrast is actually considered a valid technique to fulfill WCAG's contrast standards.

However, there are certain requirements that must be met:

The link or control on the original page must also adhere to the required contrast levels of the designated success criterion. (If the user cannot perceive the control, they may not be able to utilize it to navigate to the new page.)

The new page must encompass all the same content and functionality as the original page.

The new page should comply with all the success criteria for the targeted level of conformity. (In other words, the new page cannot only focus on achieving the desired contrast level without adherence to other guidelines).

If your goal is simply to switch styles, it is probable that conditions 2 and 3 would be fulfilled. You would just need to incorporate a button for switching between styles.

You could create a second stylesheet (.css file) explicitly defining the contrast version. Here's how you can implement this:

<link href="contrast.css" rel="alternate stylesheet" type="text/css" title="Contrast Styles">

This approach allows browsers supporting this feature (such as Firefox) to offer users the option to switch styles. Refer to Alternative style sheets

Subsequently, you can include a button in your webpage that activates this stylesheet via JavaScript, along with a media query importing it if @media (prefers-contrast: more).

It remains unclear whether your audit tools will grant approval while the alternate stylesheet is active. Ultimately, a manual review is necessary for legal compliance, ensuring conformance with 1.4.3.

How Can Users Specify Their Contrast Preference?

In the past, there was a debate about whether a font-size control should be embedded into websites, given its long-standing availability within browsers. While WCAG did not mandate it (to my knowledge), proponents argued that many users were unfamiliar with browser settings.

A similar argument can be made for contrast modes (as many users might not be well-versed in OS contrast settings or lack access to them), which is why WCAG now requires a control regardless.

Is There a Method for Browsers or Operating Systems to Adjust Contrast Preferences Based on Daylight Conditions, Themes, or Ambient Light Sensors?

In Android, there are options to utilize the dark theme setting based on daylight circumstances, and possibly some applications permitting adjustment according to ambient light levels.

To my knowledge, there is no mechanism enabling contrast mode adjustments based on these factors, not even in Windows 11, which has significantly enhanced its accessibility contrast themes.

It could be argued that such adaptations signify the user's need for heightened contrast, irrespective of day or night, light or dark themes.

Answer 2

That’s a truly thought-provoking question.

Introducing an Alternative Contrast Variation

Including a control with adequate contrast ratio for users to switch to a display with ample contrast is actually considered a valid technique to fulfill WCAG's contrast standards.

However, there are certain requirements that must be met:

The link or control on the original page must also adhere to the required contrast levels of the designated success criterion. (If the user cannot perceive the control, they may not be able to utilize it to navigate to the new page.)

The new page must encompass all the same content and functionality as the original page.

The new page should comply with all the success criteria for the targeted level of conformity. (In other words, the new page cannot only focus on achieving the desired contrast level without adherence to other guidelines).

If your goal is simply to switch styles, it is probable that conditions 2 and 3 would be fulfilled. You would just need to incorporate a button for switching between styles.

You could create a second stylesheet (.css file) explicitly defining the contrast version. Here's how you can implement this:

<link href="contrast.css" rel="alternate stylesheet" type="text/css" title="Contrast Styles">

This approach allows browsers supporting this feature (such as Firefox) to offer users the option to switch styles. Refer to Alternative style sheets

Subsequently, you can include a button in your webpage that activates this stylesheet via JavaScript, along with a media query importing it if @media (prefers-contrast: more).

It remains unclear whether your audit tools will grant approval while the alternate stylesheet is active. Ultimately, a manual review is necessary for legal compliance, ensuring conformance with 1.4.3.

How Can Users Specify Their Contrast Preference?

In the past, there was a debate about whether a font-size control should be embedded into websites, given its long-standing availability within browsers. While WCAG did not mandate it (to my knowledge), proponents argued that many users were unfamiliar with browser settings.

A similar argument can be made for contrast modes (as many users might not be well-versed in OS contrast settings or lack access to them), which is why WCAG now requires a control regardless.

Is There a Method for Browsers or Operating Systems to Adjust Contrast Preferences Based on Daylight Conditions, Themes, or Ambient Light Sensors?

In Android, there are options to utilize the dark theme setting based on daylight circumstances, and possibly some applications permitting adjustment according to ambient light levels.

To my knowledge, there is no mechanism enabling contrast mode adjustments based on these factors, not even in Windows 11, which has significantly enhanced its accessibility contrast themes.

It could be argued that such adaptations signify the user's need for heightened contrast, irrespective of day or night, light or dark themes.

Answer 3

Answer №2

To work around this issue, one approach is to set the default color scheme to high contrast in CSS and then use JavaScript to introduce alternative pastel colors.

By utilizing a timeout, we can avoid false positive color contrast warnings from validation tools that do not account for the fact that we are accommodating the user's contrast preferences. This method ensures that the audit tool completes its assessment before the alternate colors are applied. Implementing CSS transitions creates a smooth transition effect, enhancing the overall design aesthetic of the website.

The solution involves avoiding the prefers-contrast media queries in CSS, which addresses two key challenges:

Browsers often ignore @media (prefers-contrast: less), and
Validation tools such as the axe browser plugin require sufficient high contrast even when default style rules do not rely on (prefers-contrast: more) media queries.

We have several options for switching to pastel colors:

Loading a different CSS file,
Adjusting CSS custom properties, or
Removing specific class names.

In the example code snippet below, which will pass the axe color contrast audit, I have incorporated two special CSS class names:

contrast--more to apply the initial high contrast colors, and
contrast--varies to highlight elements with customizable color options and trigger a CSS transition for those elements.

.contrast--varies {
  transition: background-color 2s ease-out, color 2s ease-out;
}

document.addEventListener('DOMContentLoaded', () => {
      const prefersMoreContrastQuery = window.matchMedia("(prefers-contrast: more)");
  if (prefersMoreContrastQuery && !prefersMoreContrastQuery.matches) {
    window.setTimeout(() => {
      const moreContrastElements = document.getElementsByClassName("contrast--varies");
      for (let i = 0; i < moreContrastElements.length; i++) {
         moreContrastElements[i].classList.remove("contrast--more");
      }
    }, 5000);
  }
});

.contrast--varies {
  transition: background-color 2s ease-out, color 2s ease-out;
}

.pastelboxes div:first-child {
  color: #fff;
  background: #dbcc7c;
}

.pastelboxes div:nth-child(2) {
  color: #fff;
  background: #e2d7c1;
}

.pastelboxes div.contrast--more:first-child {
  background-color: #9a8800;
}

.pastelboxes div.contrast--more:nth-child(2) {
  background-color: #966e37;
}

.pastelboxes div {
  padding: 1em;
  font-size: 24px;
  font-weight: bold;
}

<div class="pastelboxes"gt;
  <div class="contrast--varies contrast--more">
    Some like pastel colors...
  </div>

  <div class="contrast--varies contrast--more">
    ...but illegible text for many people?!
  </div>
</div>

Answer 4

To work around this issue, one approach is to set the default color scheme to high contrast in CSS and then use JavaScript to introduce alternative pastel colors.

By utilizing a timeout, we can avoid false positive color contrast warnings from validation tools that do not account for the fact that we are accommodating the user's contrast preferences. This method ensures that the audit tool completes its assessment before the alternate colors are applied. Implementing CSS transitions creates a smooth transition effect, enhancing the overall design aesthetic of the website.

The solution involves avoiding the prefers-contrast media queries in CSS, which addresses two key challenges:

Browsers often ignore @media (prefers-contrast: less), and
Validation tools such as the axe browser plugin require sufficient high contrast even when default style rules do not rely on (prefers-contrast: more) media queries.

We have several options for switching to pastel colors:

Loading a different CSS file,
Adjusting CSS custom properties, or
Removing specific class names.

In the example code snippet below, which will pass the axe color contrast audit, I have incorporated two special CSS class names:

contrast--more to apply the initial high contrast colors, and
contrast--varies to highlight elements with customizable color options and trigger a CSS transition for those elements.

.contrast--varies {
  transition: background-color 2s ease-out, color 2s ease-out;
}

document.addEventListener('DOMContentLoaded', () => {
      const prefersMoreContrastQuery = window.matchMedia("(prefers-contrast: more)");
  if (prefersMoreContrastQuery && !prefersMoreContrastQuery.matches) {
    window.setTimeout(() => {
      const moreContrastElements = document.getElementsByClassName("contrast--varies");
      for (let i = 0; i < moreContrastElements.length; i++) {
         moreContrastElements[i].classList.remove("contrast--more");
      }
    }, 5000);
  }
});

.contrast--varies {
  transition: background-color 2s ease-out, color 2s ease-out;
}

.pastelboxes div:first-child {
  color: #fff;
  background: #dbcc7c;
}

.pastelboxes div:nth-child(2) {
  color: #fff;
  background: #e2d7c1;
}

.pastelboxes div.contrast--more:first-child {
  background-color: #9a8800;
}

.pastelboxes div.contrast--more:nth-child(2) {
  background-color: #966e37;
}

.pastelboxes div {
  padding: 1em;
  font-size: 24px;
  font-weight: bold;
}

<div class="pastelboxes"gt;
  <div class="contrast--varies contrast--more">
    Some like pastel colors...
  </div>

  <div class="contrast--varies contrast--more">
    ...but illegible text for many people?!
  </div>
</div>

What are some ways to offer a visually striking high contrast option for a pastel color palette that is also easily

Answer №1

Introducing an Alternative Contrast Variation

How Can Users Specify Their Contrast Preference?

Is There a Method for Browsers or Operating Systems to Adjust Contrast Preferences Based on Daylight Conditions, Themes, or Ambient Light Sensors?

Answer №2

Similar questions

Apply the CSS rule specifically for desktop screens, excluding mobile and tablet devices

"Create a notification pop-up in CSS that appears when a link is clicked, similar to

Avoid passing down line-height settings to elements within nested elements

Is it possible to use an SVG image as a border with a variable height in CSS

Aligning SVG clipping path using CSS

What is the best way to access the width of the top-level parent div and adjust the widths of its child and parent divs according

Using regular expressions to eliminate the width attribute from tables

Puppeteer challenge with breaking images

My website has a navbar button that is not directing to the intended section of the screen

I am attempting to create a presentation featuring the identical title

I am facing issues with the CSS in my EJS file when it is being rendered within an if statement

Div Tag Failing to Render Image

Arrange the position of a div based on the location of another div

How can I adjust the transparency in a JavaScript popup modal window for an ASP.Net GridView?

Placing a div with position:absolute inside another div with position:absolute and turning them into position:fixed

Changing the Image Path According to the Device's Retina Ratio

Creating CSS layouts without the need for using the ctrl+space function

Adjusting the width of titles in a CSS menu upon hover

Contrasting behavior shifts between in-line style declaration and class usage

Font-face src with local() is incompatible with Android devices