This test page has blocks to try out different colour combinations. The 4 colours that come from the branding are:
B8E4FA
41AAE0
F6921F
181F2D
Good Colour Contrast
These examples have acceptable colour contrast, according to the AODA rules for websites. While these rules only apply when a business or non-profit organization has 50 or more employees, they’re generally a good guideline anyways. In addition to the 4 brand colours, these examples include white. You can test the colours yourself using the WebAIM Contrast Checker.
FFFFFF / 181F2D
Ratio: 16.5:1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
181F2D / FFFFFF
Ratio: 16.5:1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
181F2D / F6921F
Ratio: 7.11:1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
181F2D / 41AAE0
Ratio: 6.32:1
This ratio is only barely acceptable. It’s fine.
B8E4FA / 181F2D
Ratio: 12.19:1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
181F2D / B8E4FA
Ratio: 12.19:1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
F6921F / 181F2D
Ratio: 7.11:1
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- 181F2D / F6921F
- Ratio: 7.11:1
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Poor Colour Contrast
This section contains examples with poor colour contrast. Do not use any of the examples in this section.
F6921F / FFFFFF
Ratio: 2.32:1
FAIL
According to the Brand Standards and Style Guide, it’s ok to put the orange text from the logo on a white background. However, this is clearly not very easy to read. This means that the only accessible logo options are the dark background and the 1 colour logo.
FFFFFF / F6921F
Ratio: 2.32:1
FAIL
FFFFFF / 41AAE0
Ratio: 2.6:1
FAIL
F6921F / B8E4FA
Ratio: 1.71:1
FAIL
B8E4FA / FFFFFF
Ratio: 1.35:1
FAIL
41AAE0 / FFFFFF
Ratio: 2.6:1
FAIL
Timeline Options
Here are a few options for plugins to display a timeline. A large number of active installations does not guarantee that the plugin will continue to be maintained, but it increases the probability.
Cool Timeline
- Active installations: 20,000
I put in some example icons, removed an image from one of the stories, and changed some of the colours. There are also settings for changing the individual stories from one side of the line to the other. See other demos at Gutenberg Timeline Block Demos
July 5, 1994
Amazon is born
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim res aperta. Ne discipulum abducam, times. Primum quid tu dicis breve? An haec ab eo non dicuntur?
Jan 31, 2021
Amazon acquires Audible
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
B Timeline
- Active installations: 2,000+
- Horizontal timeline with different description sizes doesn’t look right
- Insufficient contrast on buttons
- Keyboard navigation doesn’t have visible enough focus on buttons
- Using labels for the title is a bit weird
Demos at Timeline – B Blocks demo
Image Gallery
Extremely basic gallery that is available by default without a plugin. Options for number of columns and whether to link to a larger version of the pictures. Unlike a slider or carousel, it doesn’t have any moving parts that could possibly glitch.
MetaSlider
Tested MetaSlider demos: Image Slider, Image Carousel, and Lightbox Slider. None of them display easily when using keyboard navigation. Image slider sometimes glitches when tabbing to it. Do not use.
Icons
TODO: write instructions to download free font awesome icons as svg and insert into a block.