0

Using Firefox and its Web Developer tools, I am seeing a score of 5.5 rated AAA, with another of almost 7 rated AA.

enter image description here

I've searched for WCAG score vs rating and a couple related searches but found no instance of even an attempt at an explanation. Can anyone shed some light on what I need to know to better predict and understand the number-scale and rating-scale relationship?

Bytech
  • 1,125
  • 7
  • 22

1 Answers1

1

Based on your screenshots, it looks like what you're evaluating is the contrast minimum of two colours.

So the number you're seeing is not a "score", but the contrast ratio between the two colours you've selected.

A, AA, and AAA are the 3 levels of conformance for WCAG. Very quickly, most policies and laws require certain categories of organizations' websites in their jurisdiction to meet the specified level of conformance. So a website would need to pass all WCAG criteria at AA, for example.

The contrast ratio for

  • AA: at least 4.5:1
  • AAA: at least 7:1

So anything between 4.5 and 7 is AA, and 7+ is AAA. This is reflected in your second screenshot.

For large text though, there is a separate contrast ratio:

  • AA: at least 3:1
  • AAA: at least 4.5:1

Your first screenshot shows that it's evaluating the contrast ratio for "large text", so in this case anything between 3 and 4.5 is AA, and 4.5+ is AAA.

Arty-chan
  • 2,572
  • 1
  • 19
  • 25
  • 2
    Thought that maybe the font sizes play a role, but the font sizes having their own ratings is not intuitive in my mind. I understand that the next WCAG 3 is doing away with the A scales, so maybe after that things will be a bit more clear. Thank you! – Bytech Jun 25 '22 at 16:22
  • 1
    @Bytech just keep in mind that when WCAG 2.0 was created, sites used "core web fonts" for the most part, such as Verdana and Georgia. Today, the proliferation of fonts has brought additional issues, as there is no "standard" regarding the glyph's absolute weight or size relative to the CSS values. This is one of the more challenging problems we are workingon for WCAG 3. – Myndex Jul 26 '22 at 04:13