Skip to end of metadata
Go to start of metadata



Discovery tool mocked up for demo in CK-12 Electron Resource. For the demo the following presets would be used:

  • enlarge
    • increase text size 1.5x
    • line spacing 1.3
  • high contrast
    • black on white
    • bold and underline links
    • increase inputs and button size
    • open sans, san-serif (*default font: source sans, sans-serif)
  • low contrast
    • light grey (#bdbdbb) on dark grey (#555555)
    • roboto slab, serif
    • underlined links
  • simplify
    • article only
    • add table of contents
    • increases linespacing 1.2x
    • increases text size 1.2x
  • speak
    • turns on text to speech
  • extra words
    • alt text and long description visible for images (only for images larger than 300px w and 200px height)
    • show transcripts

See description of discovery tool

On this page




Discovery Tool Panel

Intial view



  1. default ('Try something new')
  2. default (preset)
  3. hover
  4. active
  5. active hover
  6. focus
  7. focus active 

States in contrast themes

  1. default ('Try something new')
  2. default (preset)
  3. hover: drop-shadow offset 2px (no blur), icon change
  4. active: inverted
  5. active hover: inverted with drop-shadow, icon change
  6. focus: 7pt border, icon change
  7. focus active: inverted with 7pt border, icon change
Try something new

After clicking 'Try something new' two random presets will be enabled and the rest disabled. The user will still be able to individually enable/disable the presets as they desire.
On hover, preset hover style animates one by one. On click, check boxes fade going from large to regular size and preset background changes to yellow.


High Contrast

Low Contrast

Low contrast activated

Low contrast applied to panel

After panel is collapsed and re-expanded


Simplify activated

See full simplify mockup

Table of Contents

TOC on large window




TOC on small window





See Text-to-speech walkthrough

Extra Words

Extra words activated

Panel collapsed

Showing/hiding image descriptions

Available without extra words preset

Save to Cloud



Our first iteration of the Discovery Tool involves Dinosaur content.

  • No labels