Visual Review
Colors, Links, & Buttons
The color grid can be used to indicate which colors are appropriate use for particular background colors. The colors’ accessibility compliance should all be checked to ensure AA compliance.
Colors
Colored text (default background)
Color 01 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Colored background (default text)
Color 01 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 02 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 02 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 03 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 03 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 04 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 04 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 05 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 05 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 06 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 06 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 07 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 07 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 08 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Color 08 – Heading Level 4 (H4)
Headers are frequently followed by Paragraphs… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua.
Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
Links
Text links
Links often appear in text1… Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua. Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
Lorem ipsum dolor sit amet, consectetur adipiscing elittempor incididunt ut labore et dolore magna aliqua. Oris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
Links in a list
Specialty links
- Link to an external site
- Click to call this phone number: 616.454.0505
- Email me your thoughts
- Download a file
Buttons
Snapshot/combo block
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is the default text color in the foreground. Want to try a different color background?
Change background to color one, color two, color three, color four, color five, or color six.
Also, here is a default link to go back to a white background.
- But not all of them link out to other sites; some are merely informative ↩︎