Galactic Key emblem Galactic Key · Chart key check

Every reader can tell the lines apart

Checks that every line on a chart stays tellable apart for readers with weak or no colour vision, then picks GK colours and shapes that make it so.

Lines a reader can mix upMeasured
7 of 15 → 0 of 15

Pairs among six lines, before and after.

Closest pair, colour onlyMeasured
0.94 → 5.76

The two most alike lines, hardest reader.

Reader conditions checkedMeasured
305 conditions

Five kinds of vision, weak to full.

Who benefits: people reading GK charts in greyscale (print, e-ink, a phone's greyscale mode) or with little colour vision; on GK's board colours, 7 of 15 pairs look the same to them today.

What follows: the chart key becomes a checked promise that travels with the colours, so new dashboards start safe.

Risk and limit: the vision models approximate average eyes, and thin lines need more distance than big areas.

Recommendation: use the "Best GK pick" key below for GK charts of up to six lines. Nothing is needed from Berkeley.

The same chart, seen by five readers

0 pairs mixed up

Sample lines, shape only, not real data. Colours recomputed for each kind of vision at full strength.

Typical vision

Red-weak (protan)

Green-weak (deutan)

Blue-weak (tritan)

No colour (greyscale)

Controls, every pair, and receipts

Check settings

Each setting below changes which colours are checked and how strict the check is. Tap a question mark to read what it does.

Colour source

Board order uses GK's status and type colours as the brand page lists them. Best pick searches every GK colour set. Your colours checks what you paste.

6

How many lines the chart draws. More lines need more distinct colours, so the check gets harder.

10

Smallest colour difference (CIEDE2000 units; about 2 is barely visible) that counts as told apart. Ten is this page's choice, not a standard.

The surface the chart sits on. Every line must keep at least 3 to 1 contrast against it for every reader.

Readers counted

Which kinds of vision must tell the lines apart. Weak kinds are checked at 101 strengths, from none to full.

Chart key code

Copies the checked colours, shapes and dash patterns as CSS variables for your chart code.

The checked chart key

checked 

          


          

            

              
Closest pair at every strength

            

            
For each weak kind of vision, the colour distance of the two most alike lines as the weakness grows from none to full. This chart is drawn with the first three colours and shapes the page checked.

            

          


          

            

              
Every pair of lines

              –
            

            

              

                
PairClosest distanceHardest readerTold apart by

                
              

            

          


          

            

              
Each line against the background

              –
            

            

              

                
LineTheme colourLowest contrastHardest reader

                
              

            

          


          

            

              
Receipts from this browser

            

            

              

                
CheckResultWhat it proves

                
              

            

          


          

            

              
How the check works

            

            
    
              
  1. Read each colour from GK's theme file, never from a copy, and turn it into light the screen actually emits (linear sRGB).
    2. 
              
  2. For each weak kind of vision, rebuild what the eye sees: one of the three cone types is lost, and its signal is rebuilt from the other two so that white and one primary look unchanged (Brettel, Viénot and Mollon, 1997; Viénot, Brettel and Mollon, 1999). Part strength blends from normal to full, in 101 steps. No colour uses brightness alone.
    3. 
              
  3. Measure every pair with CIEDE2000, the colour difference formula that tracks what people judge as different (Sharma, Wu and Dalal, 2005). The page tests its own formula against that paper's published pairs on every load.
    4. 
              
  4. Check contrast of each line against the background with the WCAG 2 formula; 3 to 1 is the WCAG minimum for chart lines and other graphics.
    5. 
              
  5. Best GK pick tries every set of GK colours of the chosen size, skipping sets that cannot beat the best so far, and keeps the set whose closest pair is farthest apart. It is exhaustive, so no better set exists among these colours.
    6. 
              
  6. Pairs still too close get different shapes and dash patterns. The page finds the fewest shapes that separate all of them by trying one shape, then two, and so on.
    7. 
              
  7. Distance needed is a setting, not a standard. Thin lines and small dots need larger colour differences than big patches to be told apart (Szafir, "Modeling Color Difference for Visualization Design", 2018), so raise it for hairline charts.
    8.