Transcript: Two steps forward? Making accessibility easier.
Matthew Deeprose: Hi everyone! I'm Matthew Deeprose from the University of Southampton. I'm going to share two topics in the next five minutes:
- Making accessible use of a brand colour scheme easier and
- removing friction on the accessibility checking process in Office.
Starting with brand colour contrast made easy. Now, I'm assuming that most of you will know all about colour contrast and accessibility but just in case…
In the WebAIM survey of a million web pages, the most persistent accessibility issue was low contrast text. What do we mean by that?
Here I'm sharing nine boxes in rows of three. Each box has a different coloured background and white or black text. The top row is harder to read because the colour of the text has low contrast to the background colour. The bottom row is easier to read, the text colour has higher contrast with the background colour. But what about this middle row? Some might find it easy to read, some may disagree.
How do we know how much contrast is sufficient? The Web Content Accessibility Guidelines, which I'll shorten to WCAG provide a calculation for assessing colour contrast. The result is a ratio. The higher the number the better.
I've revealed the contrast ratios for these boxes. The top row are all low numbers, below 2:1. Those would all fail. The bottom row are all high numbers all are above seven to one. They would pass because they go well beyond the minimum level of contrast. That middle row are all at 4:1 or lower. These would actually fail the minimum contrast ratio for the presentation of text.
The Web Content Accessibility Guidelines state that contrast ratio 3:1 is the minimum level of contrast for graphical objects like icons. A contrast level of 4.5 to 1 is the minimum for text. 7:1 and higher is the minimum for text when we want to reach the AAA level of accessibility.
For someone new to accessibility this can seem a bit intimidating. If someone just wants to use our colour brand, or our brand colour palette, how can they make accessible choices easily?
That's a question I was asking myself in Spring 2019 when I was updating our institutional Virtual Learning Environment, Blackboard , to use our corporate brand colour scheme. In almost 2,000 lines of CSS I had about 300 colour statements. That included things like focus indicators, hover states, and so on. I was regularly going between our brand palette and a contrast checker. My favourite is whocanuse.com. So, after the umpteenth colour contrast check, I wrote a script which took all of the 441 colour combinations of our brand and checked them for contrast. Initially, the result was a spreadsheet, but I developed it further into a responsive web page. This meant I had a lookup table to check colours easily.
To zoom in and give you a clearer understanding, the same colours are in the same order for both the horizontal and vertical axes. Where two colours meet, the table shows F if it fails all contrast criteria. G means it can only be used for graphical objects like icons. AA means that as well as graphical objects it could be used for text, but only at that minimum AA level. AAA means it can be used for text at the enhanced level, so higher than 7:1, as well as for graphical objects.
I shared with colleagues who started using it and they gave me some feedback. One shared that it was all well and good to know what combinations you could use but it would be nice to browse through the accessible combinations and see how they look. So, I developed the script further to produce examples of every on-brand accessible colour combination. Here’s a larger example. You can see it has the colour details, contrast ratio, an example of how it looks; one example here shows the graphic icon, the other shows text. The screenshots show how I also implemented dark and light themes.
I also added a little bit of info, like how many combinations from our brand palette were accessible when used together. For example, only 19% of the colour combinations in our brand can be used for text. So, obviously our palette was not designed with accessibility in mind.
It helped me find some other insights. Only seven colours in our brand have sufficient contrast with white, two of those are different shades of black! Whereas, with a black background I can use eleven other brand colours and they're much more fun colours like orange, green, yellow, cyan, compared with dark blue and magenta that I can use with white. It also highlighted that two colours in our brand cannot ever be used for text whatsoever, only graphical objects.
Since I wrote the script to do this, the hard work's done. On that link to the page I shared earlier, if you'd like to have something like this for your brand, the details are there, with what I'll need to make one for you.
The other topic is making the accessibility inspector more visible in office for everyone.
The accessibility inspector in Office alerts you to accessibility issues whilst you work. Once you've turned it on, it appears at the bottom left corner of Office. As you can see on screen, it says “accessibility: investigate,” if it has found some issues.
But, there's some friction. You have to follow three steps to turn it on: file, options, ease of access and tick “keep accessibility checkout running whilst I work”. I often see people, when they share their screens during a meeting, that they haven't turned this on… even people giving presentations about equality, diversity and inclusion.
I asked the Microsoft Enterprise Disability Answer Desk, if we could set this on by default on machines managed by the university. They said yes you can do this using Group Policy. So, I've raised this as a request to our desktop team who now have it in their queue. I'm hoping it will be implemented by September and we'll then be doing some comms to our user community.
Hopefully this change, that reduces that friction of setting up that option, will inspire more people to turn that cross in the accessibility inspector into a tick.
Thanks for listening and if you're interested in other blog posts, presentations, and accessibility projects I've shared there's more on my website. I've recently talked about implementing accessibility in higher education IT departments, creating accessible Power BI reports, and aspects of web development like Aria roles for screen readers, light and dark modes and so on.
So, thanks very much and back to you.
Emma Horrell: Thank you, Matt! Wow, I think we're all just in awe of what you've achieved. There some fantastic reactions in the chat and people clapping as well. I will check and see if…
Matthew Deeprose: Hopefully, it was worth it in the end after all the technical issues?
Emma Horrell: Absolutely. Totally was. You know, good things come to those who wait.
Matthew Deeprose: Very true.
Emma Horrell: Lots of information there, and just complete wizardry, I think. Yeah. There's lots of interest in the colour checker, because I think people will find it useful in their own institutions. While we wait for questions to come in. I had a question about that and sort of I guess more generally around applying brand colours and checking accessibility to something like a third party, so Blackboard ’s product. Did you find, like, any help from the Blackboard side of things in terms of… helping what you wanted to achieve in terms of colour contrast or… yeah, how did that work?
Matthew Deeprose: I had lots of help from the community in terms of… when I started the work, I didn't know anything about CSS and with the help of them within a month I was writing CSS and it was then that I had... at the same time, I've started hearing about the accessibility regulations, and so then… I went further and that was kind of from my own side learning about it and then realising what we needed to do to make sure it's accessible. Because, for example, with some systems you might have the option to change aspects of a system to use your brand, but then say you've changed the colour of a background to your university, like, main, major, main colour. That might have then made the focus indicators that are set for that system [to] no longer have sufficient contrast, because although this is going to be explicitly stated in WCAG 2.2, even in WCAG 2.1, if you read between the lines and examine some of the background pages, it says you really need to have a 3:1 contrast ratio, in your focus indicators to the background. So, that just shows sometimes even the vendors have maybe allowed you to set one colour. But in doing so, you might have then made something worse on another side.
Emma Horrell: I'm not sure we have any specific questions. There's lots and lots of appreciation for your knowledge and wisdom. Focus indication is massive.
Matthew Deeprose: Are there… I could just mention a couple of things, a couple of slides I cut because I wasn't sure if I was going to have time and I could just mention a few of those and hopefully I won't break Teams by sharing my screen again. But. I was half expecting, someone to say, but what about a APCA? APCA (Accessible Perceptual Contrast Algorithm) is the new measurement of contrast in WCAG 3, which obviously… WCAG 3 isn't yet settled and it isn't yet out, but it has been confirmed that they're going to change the contrast measurement that they use. So, I do plan, once there's an API for the Accessible Perceptual Contrast Algorithm. I do plan to adjust the script to take those measurements and have like a parallel matrix that could show those, but in Chrome Dev tools you can enable the CSS overview tool and there's a setting to get it to use APCA contrast measurement and on screen I'm showing that it has detected where I've got a list of all of the possible colour combinations from our brand, it's then shown that actually there's 15 that had passed WCAG 2 but would not pass APCA so that's how I'm approaching that in the in the medium term. At the moment, I'm making sure that everything passes both WCAG 2 and APCA.
Another thing that I want to work on, (I don't know when I'm ever going to get [the] time, is I remember I think, Emma, you were talking about working on a design system at Edinburgh. What I'd like to do is, where I've got the examples of all of the different colour combinations you can use for text, is to then just develop it further and have a few different components and then show these are all of the different colour combinations where the background and the foreground have sufficient contrast, but also the focus indicator will have sufficient contrast to those two that is both different enough to the main colour, but still has sufficient contrast with the background and try it out with a few different components. Then at a click of a button, I could see all of the possible colour combinations not only for text and so on, but where you've kind of got that more three-dimensional look: We've got to check three different contrast ratings and make sure that they all line up together. So that's just a couple of extras for the accessibility geeks among us.
Emma Horrell: That looks amazing. Yes, we are. We're building a design system at Edinburgh and actually on that, it's interesting, you mentioned sort of components and because there is obviously, there's things that people have to do or can do themselves to address accessibility and like getting an understanding of what those things are is important and sort of understand that it's not just tech, but maybe on the kind of design system / CMS side of things, are there things that you've encountered that maybe make accessibility, like more available? I suppose so that people are doing things maybe without necessarily consciously realizing it's accessible. It's just good practice embedded in those design systems and CMS's.
Matthew Deeprose: Well, something that I really like the idea of that I don't have direct experience of and I'll have to check for this gentleman's name. But he’s a gentleman in the Moodle community who's been customising Moodle, such that when you're using the text editor, it will only allow you to make accessible choices. So, for example, say it knows you've got a background colour, it will only let you select from the palette [text] colours that would have sufficient contrast.
I think that can be quite a nice way of kind of channelling people to make good decisions by removing the ability to make bad decisions. Well, not necessarily bad, but decisions that wouldn't…
Emma Horrell: Once that will have consequences.
Matthew Deeprose: Yeah, yeah. Yep. Be accessible, yes. And I'll dig out his name, but it's probably not that relevant within the CMS context, but I dare say if you could, if it would be possible to customise the CMS, and it definitely would be possible because there's libraries in JavaScript which can do that kind of contrast checking, so it's a kind of if background colour is this, only show these colours and you can do that at runtime. So, it can be kind of totally dynamic
That is an idea… also for example like not allowing a page to be published until it's passed, like:
- it's got alternative text,
- it's got headings,
- they're in the right order,
that kind of thing. And you can also apply that within an IT department. If you have a continuous integration / continual deployment process, you can use free tools such as axe or pally to run checks so that when they're someone tries to do a push or pull request that there will be… there is automated checks and then someone would have to say, if they found accessibility issues, I will let it go into the main code base or I'll send it back and say you need to fix these issues, and there are further ones where it will offer to try to fix them automatically for you. Like I've seen that you've got a bit low contrast here if you just change the shade by like this many points then you would have sufficient contrast.
Emma Horrell: Yeah, I think it. I think that that kind of tool would be very helpful, like as well as teaching people, getting people to understand what they can do, but equally just things that will help them make the right choices. Because there is, obviously, there's lots to consider and consequences of one decision might not be known until something's published. It's out there. It's then copied. It's all over the place. So, I think, that kind of approach would be really helpful, and I think people would be encouraged as well to know that you know that that is available.
Matthew Deeprose: Definitely. I remember higher up in the chat, but I'm just scrolling… I can't find… someone mentioned that say that you had, sign language [interpretation] happening at the same time that for some that might be too distracting and so allowing to have a options of different choices.
So [for example], “I'd like to have the dark mode”. “I'd like to have the light mode”. “I'd like to have the ‘no distractions’, mode”, and a lot of these sorts of things should be fairly configurable if you're using a template. Some of those examples, is some websites like to have really fancy scrolling effects like parallax. If you have a vestibular issue then it might make you feel that you have to have a lie down when you're scrolling down a page. So, there's a CSS selector [media feature] “prefers-reduced-motion” so that if you set in your operating system, I don't want to have these kinds of animations. Then as a designer you can account for that preference within your code, and say if someone doesn't want animations, I'm going to give them a version without animations and so on.
Emma Horrell: He’s saying, “yes, please give me choices”! Conscious of time…
Matthew Deeprose: Ohh, one other thing. Since Chris mentions about Figma having contrast checking tools.
Emma Horrell: No, go for it.
Matthew Deeprose: I'll dig out a link and put it in the chat in a moment. There's some really nice plugins for Figma that allow you to add what are called accessibility blue lines because I think there was a presentation or there's a thing about red lines or this… kind of like wireframes.
But you can add in, “this will be the H1”, “this will be the H2”, and you can add these little tags in Figma so that as you pass a design from a designer onto a coder that they don't then have to “guess” how accessibility is meant to be applied. You can make it clear. As one of my accessibility colleagues told me, “the last thing you want to ask a developer to do is think”.
Emma Horrell: No comment. But something I think we can resonate with it. It can be difficult. I think communicating messages on from design to development is a whole other topic, but just yeah, keeping that message passed over when there's a lot to consider. And as I said before, one small thing can break other things without people necessarily meaning to do a bad job, but it is trying to kind of keep that consistency.
And that has been absolutely amazing. I'm totally blown away by the number of new links that we have all shared and good practice and resources.