Skip to content

Dark surface for the figure area to clear the contrast floor #20

Description

@amc-corey-cox

A dark surface behind the figures is the only route to charts that meet the 3:1 non-text contrast floor without relying on strokes. Minimum contrast across each palette, by background:

scheme                Lmin   Lmax    white   #f4f4f6   #121212   #1e1e1e   black
Tol bright           0.122  0.522     1.84      1.67      3.08      2.74    3.45
Tol vibrant          0.152  0.424     2.21      2.02      3.61      3.21    4.05
Okabe-Ito            0.000  0.744     1.32      1.20      1.12      1.26    1.00
Okabe-Ito no black   0.152  0.744     1.32      1.20      3.61      3.21    4.05
Tol muted            0.036  0.599     1.62      1.47      1.54      1.37    1.73

Tol bright roughly doubles on dark and clears 3:1 at a realistic #121212.

Mechanism. The minimum over a set is fixed by whichever colour sits closest in luminance to the background: 1.05/(Lmax+0.05) against white, (Lmin+0.05)/0.05 against black. Qualitative schemes deliberately span luminance because brightness is the channel dichromats retain, so one end always pays. This also makes white and black the optimal backgrounds, with every mid-tone worse — there is no better background hiding in between.

Scope it to the figure area. Inverting the whole page does not work: the BDC palette is built for light surfaces, and three of six brand colours become unusable for text (Catalyst Blue 7.63 -> 2.46, Catalyst Dark Blue 12.08 -> 1.55, Catalyst Dark Gray 11.55 -> 1.62; only Bright Blue improves). A dark surface behind only the charts avoids this, and the guide's colour guidance addresses chrome — header, footer, sidebar, buttons, linked text — so a dark figure canvas leaves everything it speaks to untouched.

The style guide contains no dark mode content of any kind, and Tol's document assumes a white background throughout. Nothing to violate, but no authority to lean on either.

If this is built, switch to Tol vibrant — it beats Tol bright in both modes with the same six colours. The palette picker currently in the header makes that a low-risk change to evaluate.

Notes: colour-vision separation is unaffected by background, so this buys contrast, not distinguishability. And light mode still cannot clear 3:1 for any palette, so FILL_STROKE stays regardless — dark mode only makes it redundant in that one mode.

Split out of #10.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions