Skip to content

Accessibility: colors chosen for background/text report count flags are WCAG violation #310

@rahaeli

Description

@rahaeli

Hooray for the addition of report counts! Unfortunately, the colors chosen are a WCAG contrast violation and also an accessibility problem beyond pure WCAG standards.

Problem: .bg-blue-400 background (RGB 96, 165, 250) with .text-blue-800 text (60, 64, 175) is a contrast ratio of 3.43:1, which fails both WCAG 2.0 standard 1.4.3 level AA (standard size text must be 4.5:1) and WCAG 2.0 standard 1.4.3 level AAA (standard size text must be 7:1).

The pure "meet this standard only" fix: setting .text-blue-800 to pure black would give you 8.25:1.

However, using a colored background at all there on the queue view is an accessibility problem that is not part of the WCAG standards yet because the science on it is extremely in its infancy: it turns scrolling the queue view into a photosensitive vertigo migraine trigger. I will skip the full explanation unless you want it because it's long and complicated, but the extremely short version: if blocks of high-contrast color appear and disappear or move as you scroll or page down, it has a high chance of triggering photosensitive migraine in those who are susceptible (yes, this is why "dark mode" works better for people who get photosensitive migraine, because the contrast is usually lower).

I strongly recommend setting both the foreground and background color on that element in at least the queue view to the same foreground and background color as the standard text for every other element in the table row. It's less urgent to change on the report view, because that doesn't flicker in and out when you scroll, but it's probably easier not to specialcase.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions