Skip to content

Fix nav link contrast ratio in light mode (WCAG fail) #3

Description

@BharathASL

Problem

In light mode, nav links use secondary-text which maps to light-600: #d0d0d0 on a background of light-100: #979898.

Contrast ratio: ~1.7:1 — WCAG minimum for normal text is 4.5:1.

Nav links are essentially invisible in light mode.

Fix

Correct the light palette values (see related issue for palette fix). After fixing light-600 to #555555 and light-100 to #f7f7f7, contrast becomes ~7:1 which passes WCAG AA.

File: scss/ui.scss — nav .active and hover states may also need revisiting once palette is corrected.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions