Skip to content

Dark mode accessibility issue: low contrast #3234

@yawaramin

Description

@yawaramin

This is a refiling of ocaml/v2.ocaml.org#1642 which was unfortunately summarily closed. The user missed the 'Docs' link while scanning the page because it was too hard to see against a dark background.

As an aside: can someone please archive the old repo if we don't want people to accidentally file issues there? Thanks.

Example using this page: https://ocaml.org/p/cmarkit/latest

axe DevTools output:

Elements must meet minimum color contrast ratio thresholds

Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

Element Location: .border-l-0

<a class="w-full h-10 flex justify-center rounded-r-lg p-1 items-center font-semibold border border-l-0  border-primary dark:border-dark-primary text-primary dark:text-dark-primary bg-sand dark:bg-dark-card" href="/p/cmarkit/latest/doc/index.html">Docs</a>

To solve this problem, you need to fix the following:
Element has insufficient color contrast of 3.59 (foreground color: #c24f1e, background color: #1c1c1c, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    📋 Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions