CSS custom properties and accessibility

Giving users the ability to control the way they see content improves the accessibility and usability of a site. This is traditionally achieved with a user stylesheet (although this is no longer supported in Chrome without the use of additional plugins).

In site features that allow a user to change the way content is displayed are nothing new, but with CSS custom properties are much easier to implement.

CSS custom properties are the improved alternatives to the variables available in pre processing languages like Sass and Less. Unlike compiled variables custom properties allow values to be updated dynamically.

By utilising these real time updates custom properties can be used to allow users to take control of the content they see and customise the experience.

Example 1 - update colour theme

Themed CSS became common practice with the arrival of Sass variables, by defining a set of colour variables at the top of a partial CSS can be reused quickly and easily. This practice however introduces a lot of duplicate code and CSS bloat.

Because pre processor variables are compiled before build, changes made in the browser have to be pre planned and written out in full. Files like the one below contain duplicate CSS nested under classes that are attached to the body with javaScript.

main.css

$background-color: #eee;
$text-color: #222;
$link-colour: #3d9970;
$link-colour-hover: #001f3f;

body {
  background-color: $background-color;
  color: $text-color;
}

a {
 colour: $link-colour;
} &:hover {
 colour: $link-colour-hover;
}

@import 'theme-dark';
@import 'theme-monochrome';

theme-dark.css

$background-color: #111;
$text-color: #fff;
$link-colour: #ffdc00;
$link-colour-hover: #048386;

.theme-dark {
  background-color: $background-color;
  color: $text-color;

  a {
    color: $link-colour;

    &:hover {
      color: $link-colour-hover;
    }

  }

With custom properties this duplication is removed, the property values do not need to be complied meaning they can be updated in real time in the browser. The above Sass example can now be replaced with this…

main.css

:root {
  --background-color: #111;
  --text-color: #fff;
  --link-colour: #ffdc00;
  --link-colour-hover: #048386;
}

.theme-dark {
  --background-color: #111;
  --text-color: #fff;
  --link-colour: #ffdc00;
  --link-colour-hover: #048386;
}

body {
  color: var(--colour-black);
  background: var(--colour-white);
}

Naming things is difficult

On a side note naming CSS variables in a meaningful and user friendly way is difficult, naming colour variables that are used in multiple themes is even harder! Each variable name needs to make sense in each instance, without being overly case specific.

Bad examples

  --border-colour: #999999;
  --text-colour: #333333;

  --colour-one: #333333;
  --colour-two: #333333;
  --colour-three: #333333;

  --orange: #fb820a;
  --red: #ed0c0c;

The problem with the names like --orange and --red is they aren't reusable, when we switch themes red may no longer be red.

By referencing each property like --border-colour and --text-colour we risk having an unmanageable number of variables to work with, and could end up with duplicate values.

Finally names with no context like --colour-one and --colour-two become difficult to work with on large scale projects.

Colour variable names should be scalable and easy to manage, it also should be obvious what each variable represents in any theme just by looking at it's name.

Good examples

  --colour-primary: #001f3f;
  --colour-secondary: #e0f0ff;
  --colour-tertiary: #3d9970;

  --colour-dark: #001f3f;
  --colour-white: #e0f0ff;
  --colour-bright: #3d9970;

  --colour-error: #a91919;

Three theme example

:root {
  --colour-black: #001429;
  --colour-dark: #001f3f;
  --colour-medium: #003d7a;
  --colour-white: #e0f0ff;
  --colour-white: #ffffff;
  --colour-bright: #3d9970;
  --colour-error: #a91919;
}

.theme-dark {
  --colour-black: #ffffff;
  --colour-dark: #aaaaaa;
  --colour-medium: #2ecc40;
  --colour-white: #048386;
  --colour-white: #111111;
  --colour-bright: #ffdc00;
  --colour-error: #ff851b;
}

.theme-monochrome {
  --colour-black: #bd9562;
  --colour-dark: #ab773f;
  --colour-medium: #553c1c;
  --colour-white: #3c240d;
  --colour-white: #211505;
  --colour-bright: #af8857;
  --colour-error: #a37a48;
}

Once we have the variables properties assigned for each theme we can use JavaScript to add a class name to the body.

themedefault.onclick = function(){
    body.classname = "theme-default";
  };

 themedark.onclick = function(){
    body.classname = "theme-dark";
  };

thememonochrome.onclick = function(){
  body.classname = "theme-monochrome";
  };

This is great, until the user navigates to a new page or refreshes the browser. To solve this issue we can store the value of the custom property using local storage, and then check for a saved value on page load.

body.classname = localstorage.getitem("currenttheme");

themedefault.onclick = function(){
  body.classname = "theme-default";
  localstorage.setitem("currenttheme", 'theme-default');
};

themedark.onclick = function(){
  body.classname = "theme-dark";
  localstorage.setitem("currenttheme", 'theme-dark');
};

thememonochrome.onclick = function(){
  body.classname = "theme-monochrome";
  localstorage.setitem("currenttheme", 'theme-monochrome');
};

Demo

See the Pen Custom property colour themes by Cathy Dutton (@cathydutton) on CodePen.

Example 2 - update a font

Updating a font type can also be achieved without custom properties using a body class...

const body = document.body;

body.classlist.add("comic-sans");

body {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
}

comic-sans {
  font-family: "comic sans ms", "comic sans", cursive;
}

There is nothing wrong with this approach in this instance, but if you are allowing users to update multiple properties for example font type and colour theme you could end up with a lot of additional classes.

An alternative approach is to declare the font just once in CSS using a custom property.

:root {
  --font-family: "helvetica neue", helvetica, arial, sans-serif;
}

body {
  font-family: var(--font-family);
}

And allow users to update this value through javaScript

// global
const body = document.body;
const root = document.queryselector(':root');
const rootstyles = getcomputedstyle(root);

dyslexicfont.onclick = function(){
  body.style.setproperty('--font-family', '"comic sans ms", "comic sans", cursive');
};

defaultfont.onclick = function(){
  body.style.setproperty('--font-family', rootstyles.getpropertyvalue('--font-family'));
};

When either button is clicked the value of the custom property --font-family is updated across the page, again we can store these values in local storage to save a users preferences...

// if no local storage value exists create one
if (!fontfamily) {
    body.style.setproperty("--font-family", localstorage.getitem("fontfamily"));
}

// get current value
var fontfamily = getcomputedstyle(body).getpropertyvalue('--font-family');


dyslexicfont.onclick = function(){
  body.style.setproperty('--font-family', '"comic sans ms", "comic sans", cursive');
  localstorage.setitem("fontfamily", '"comic sans ms", "comic sans", cursive');
};

defaultfont.onclick = function(){
  body.style.setproperty('--font-family', rootstyles.getpropertyvalue('--font-family'));
  localstorage.setitem("fontfamily", rootstyles.getpropertyvalue('--font-family'));
};

Demo

See the Pen Custom property font switcher by Cathy Dutton (@cathydutton) on CodePen.

Example 3 - update text size

Updating the text size for a site is slightly more complex, in this example simply adding a class to the body would not work, (unless you want a stylesheet full of classes for every available size).

The concept here is similar to updating the font, but instead of assigning a new value to the property we amend it.

:root {
  --font-size: 1.188em;
}

body {
  font-size: var(--font-size)
}

Increase text size

increasefont.onclick = function(){
    var number = parsefloat(fontsize)
    number += 0.2
    fontsize = number;
    body.style.setproperty('--font-size', number + 'em');
    localstorage.setitem("fontsize", number + 'em');
};

Decrease text size

decreasefont.onclick = function(){
    var number = parsefloat(fontsize)
    number -= 0.2
    fontsize = number;
    body.style.setproperty('--font-size', number + 'em');
    localstorage.setitem("fontsize", number + 'em');
};

When each button is clicked the current value of --font-size is taken and either increased or decreased. The parseFloat() function is used to first strip the unit from the property and then convert the value from a string to an integer.

Demo

See the Pen Custom property text size by Cathy Dutton (@cathydutton) on CodePen.

Share on Twitter