Support a high-contrast theme

[sehilyi]

• WCAG 2.1 (https://webaim.org/resources/contrastchecker/)

  • WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components
  • WCAG 2.1 AAA Requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text
  • Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger

• HighCharts high contrast: https://www.highcharts.com/docs/chart-design-and-style/themes

• Don't use transparent background: https://pauljadam.com/demos/canvas.html#hcm

[sehilyi]

Example Spec:

{
  "base": "dark",
  "root": {
    "background": "black",
    "titleColor": "white",
    "titleBackgroundColor": "transparent",
    "titleFontSize": 20,
    "titleFontFamily": "Arial",
    "titleAlign": "left",
    "titleFontWeight": "bold",
    "subtitleColor": "white",
    "subtitleBackgroundColor": "transparent",
    "subtitleFontSize": 18,
    "subtitleFontFamily": "Arial",
    "subtitleFontWeight": "normal",
    "subtitleAlign": "left",
    "showMousePosition": true,
    "mousePositionColor": "#000000"
  },
  "track": {
    "background": "transparent",
    "alternatingBackground": "transparent",
    "titleColor": "white",
    "titleBackground": "black",
    "titleFontSize": 18,
    "titleAlign": "left",
    "outline": "white",
    "outlineWidth": 2
  },
  "legend": {
    "position": "top",
    "background": "white",
    "backgroundOpacity": 1,
    "labelColor": "black",
    "labelFontSize": 18,
    "labelFontWeight": "normal",
    "labelFontFamily": "Arial",
    "backgroundStroke": "white",
    "tickColor": "black"
  },
  "axis": {
    "tickColor": "white",
    "labelColor": "white",
    "labelFontSize": 18,
    "labelFontWeight": "normal",
    "labelFontFamily": "Arial",
    "baselineColor": "white",
    "gridColor": "lightgrey",
    "gridStrokeWidth": 1,
    "gridStrokeType": "solid",
    "gridStrokeDash": [4, 4]
  },
  "markCommon": {
    "color": "#E79F00",
    "size": 1,
    "stroke": "white",
    "strokeWidth": 1,
    "opacity": 1,
    "nominalColorRange": [
      "#E79F00",
      "#029F73",
      "#0072B2",
      "#CB7AA7",
      "#D45E00",
      "#57B4E9",
      "#EFE441"
    ],
    "quantitativeSizeRange": [6, 12]
  },
  "point": {
    "color": "#E79F00",
    "size": 8,
    "stroke": "black",
    "strokeWidth": 0,
    "opacity": 1,
    "nominalColorRange": [
      "#E79F00",
      "#029F73",
      "#0072B2",
      "#CB7AA7",
      "#D45E00",
      "#57B4E9",
      "#EFE441"
    ],
    "quantitativeSizeRange": [6, 12]
  },
  "rect": {
    "color": "#E79F00",
    "size": 1,
    "stroke": "black",
    "strokeWidth": 0,
    "opacity": 1,
    "nominalColorRange": [
      "#E79F00",
      "#029F73",
      "#0072B2",
      "#CB7AA7",
      "#D45E00",
      "#57B4E9",
      "#EFE441"
    ],
    "quantitativeSizeRange": [2, 6]
  },
  "triangle": {
    "color": "#E79F00",
    "size": 1,
    "stroke": "black",
    "strokeWidth": 0,
    "opacity": 1,
    "nominalColorRange": [
      "#E79F00",
      "#029F73",
      "#0072B2",
      "#CB7AA7",
      "#D45E00",
      "#57B4E9",
      "#EFE441"
    ],
    "quantitativeSizeRange": [2, 6]
  },
  "area": {
    "color": "#E79F00",
    "size": 1,
    "stroke": "white",
    "strokeWidth": 1,
    "opacity": 1,
    "nominalColorRange": [
      "#E79F00",
      "#029F73",
      "#0072B2",
      "#CB7AA7",
      "#D45E00",
      "#57B4E9",
      "#EFE441"
    ],
    "quantitativeSizeRange": [2, 6]
  },
  "line": {
    "color": "#E79F00",
    "size": 1,
    "stroke": "white",
    "strokeWidth": 0,
    "opacity": 1,
    "nominalColorRange": [
      "#E79F00",
      "#029F73",
      "#0072B2",
      "#CB7AA7",
      "#D45E00",
      "#57B4E9",
      "#EFE441"
    ],
    "quantitativeSizeRange": [2, 6]
  },
  "bar": {
    "color": "#E79F00",
    "size": 1,
    "stroke": "black",
    "strokeWidth": 0,
    "opacity": 1,
    "nominalColorRange": [
      "#E79F00",
      "#029F73",
      "#0072B2",
      "#CB7AA7",
      "#D45E00",
      "#57B4E9",
      "#EFE441"
    ],
    "quantitativeSizeRange": [2, 6]
  },
  "rule": {
    "color": "#E79F00",
    "size": 1,
    "stroke": "black",
    "strokeWidth": 1,
    "opacity": 1,
    "nominalColorRange": [
      "#E79F00",
      "#029F73",
      "#0072B2",
      "#CB7AA7",
      "#D45E00",
      "#57B4E9",
      "#EFE441"
    ],
    "quantitativeSizeRange": [2, 6]
  },
  "link": {
    "color": "#E79F00",
    "size": 1,
    "stroke": "black",
    "strokeWidth": 1,
    "opacity": 1,
    "nominalColorRange": [
      "#E79F00",
      "#029F73",
      "#0072B2",
      "#CB7AA7",
      "#D45E00",
      "#57B4E9",
      "#EFE441"
    ],
    "quantitativeSizeRange": [2, 6]
  },
  "text": {
    "color": "#E79F00",
    "size": 18,
    "stroke": "white",
    "strokeWidth": 0,
    "opacity": 1,
    "nominalColorRange": [
      "#E79F00",
      "#029F73",
      "#0072B2",
      "#CB7AA7",
      "#D45E00",
      "#57B4E9",
      "#EFE441"
    ],
    "quantitativeSizeRange": [2, 6],
    "textAnchor": "middle",
    "textFontWeight": "normal"
  },
  "brush": {
    "color": "gray",
    "size": 1,
    "stroke": "black",
    "strokeWidth": 1,
    "opacity": 0.3,
    "nominalColorRange": [
      "#E79F00",
      "#029F73",
      "#0072B2",
      "#CB7AA7",
      "#D45E00",
      "#57B4E9",
      "#EFE441"
    ],
    "quantitativeSizeRange": [2, 6]
  }
}

Example Gosling Spec

{
  "title": "High-Contrast Example",
  "subtitle": "We need to support an accessible Gosling theme!",
  "tracks": [
    {
      "data": {
        "url": "https://server.gosling-lang.org/api/v1/tileset_info/?d=cistrome-multivec",
        "type": "multivec",
        "row": "sample",
        "column": "position",
        "value": "peak",
        "categories": ["sample 1", "sample 2", "sample 3", "sample 4"]
      },
      "mark": "point",
      "x": {"field": "position", "type": "genomic", "axis": "top"},
      "y": {"field": "peak", "type": "quantitative", "grid": true},
      "size": {"field": "peak", "type": "quantitative"},
      "color": {"field": "sample", "type": "nominal", "legend": true},
      "tooltip": [
        {"field": "start", "type": "genomic", "alt": "Start Position"},
        {"field": "end", "type": "genomic", "alt": "End Position"},
        {
          "field": "peak",
          "type": "quantitative",
          "alt": "Value",
          "format": ".2"
        },
        {"field": "sample", "type": "nominal", "alt": "Sample"}
      ],
      "width": 1000,
      "height": 430
    }
  ]
}