Pushing accessibility even further with Chrome 65

Earlier this month, Google released an exciting update to its web browser — Chrome 65.

The release contained a number of updates and additions to the Chrome dev tools designed to help develop accessible content for partially-sighted and colour blind users.

Colour picker

The existing colour picker was essentially a colour map and “eyedropper” tool. It was useful for selecting specific colours on the page, but how did users know how accessible the colours were?

The shiny new colour picker introduces a few changes to help ensure that colours are accessible to all users.

Google Chrome 65 colour picker

The updates to the colour picker are:

  1. The colour contrast is displayed as a ratio, where 1 is the worst possible (i.e. text the same colour as the background) and 21 is the best possible.
  2. Whether the colour contrast meets WCAG AA or WCAG AAA standards is specified. In broad terms, the ratio needs to be greater than 4.5 for WCAG AA and greater than 7 for WCAG AAA.
  3. The background colour can be changed to see whether sufficient colour contrast can be achieved that way.
  4. A line is shown on the colour map showing which shades are accessible. In the above example, colours below the line meet WCAG AA standards and colours below the line do not. The line is updated when the colour or opacity are adjusted.

Accessibility pane

The accessibility pane is a brand new addition to the dev tools.

Accessibility pane

The accessibility pane features:

  1. The DOM tree structure, as would be seen by a screen reader. Each of the elements in the tree can be clicked to see their respective properties.
  2. The ARIA attributes for the selected element.
  3. The computed properties relevant to accessibility (e.g. name, title, role and heading level) for the selected element.

To read more about these changes, check out the Google Blog or watch their video below.

P.S. I’ve spotted a bug with the updated colour picker where the line fails to move if the opacity slider is adjusted quickly. I’ve provided this as feedback to our friends at Google and hopefully it’ll be fixed in the next release.

Leave a Reply