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

On this page

Discovery Tool Panel

Intial view

Styling

States

default ('Try something new')
default (preset)
hover
active
active hover
focus
focus active

States in contrast themes

default ('Try something new')
default (preset)
hover: drop-shadow offset 2px (no blur), icon change
active: inverted
active hover: inverted with drop-shadow, icon change
focus: 7pt border, icon change
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.