Skip to main content

Sass mixins for Increased Contrast Mode (and Dark Mode)

Posted in CSS and Development

When I added a high contrast version of my website I used an almost-identical SCSS (Sass) mixin to the one I use for Dark Mode. It’s a riff on the mixin Will Moore from 1Password wrote about in late 2018, and here’s how it looks:

@mixin high-contrast($background: null, $colour: null) {

@media screen and (prefers-contrast: more) {

@if ($background != null and $colour != null) {
background-color: $background;
color: $colour;
@content;
}
@else if ($background != null and $colour == null) {
background-color: $background;
@content;
}
@else if ($colour != null and $background == null) {
color: $colour;
@content;
}
@else {
@content;
}
}
}

This allows us to do any of the following:

  1. Style the text colour only:
    @include high-contrast(black, white);
  2. Style the background only:
    @include high-contrast($background: black);
  3. Style the background and text colour:
    @include high-contrast($colour: white);
  4. Style something other than background and text colour:
    @include high-contrast() {
    border-color: white;
    }
  5. Style the background, text colour and something else:
    @include high-contrast(black, white) {
    border-color: white;
    }
  6. Style the background and something else:
    @include high-contrast($background: black) {
    border-color: white;
    }
  7. Style the text colour and something else:
    @include high-contrast($colour: white) {
    border-color: white;
    }

Pretty handy!

I mentioned I do the same for Dark Mode, and that mixin is almost identical; it’s just the name of the mixin and the media query that’s called that change:

@mixin dark-mode($background: null, $colour: null) {

@media screen and (prefers-color-scheme: dark) {

@if ($background != null and $colour != null) {
background-color: $background;
color: $colour;
@content;
}
@else if ($background != null and $colour == null) {
background-color: $background;
@content;
}
@else if ($colour != null and $background == null) {
color: $colour;
@content;
}
@else {
@content;
}
}
}

The @includes work exactly the same, substituting high-contrast for dark-mode.

Accessibility in your inbox

I send an accessibility-centric newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.

  2. The accessibility conversations you want to be having

    In most companies, accessibility conversations centre around WCAG compliance, but that’s just the start. Thinking beyond that is where you want to be!