Red

Accent Colours

  • $color-red-lighten-15#F8AAAB
  • $color-red-lighten-10 #F79294
  • $color-red-lighten-5 #F57B7C
  • $red#F36365
  • $color-red-darken-5 #F14B4E
  • $color-red-darken-10#EF3436
  • $color-red-darken-15#EE1C1F

Usage

  • Image gradient maps
  • Large typographical elements
  • Icons
  • Dividing lines
  • Small background areas
  • Core brand elements for Duncan of Jordanstone College of Art & Design

 

  • Large background areas
  • Body text
  • Buttons

Accessibility

White

  • Contrast ratio 3.1:1
  • WCAG 2 AA Compliant Failed
  • WCAG 2 AA Compliant(18pt+) Passed
  • WCAG 2 AAA Compliant Failed
  • WCAG 2 AAA Compliant(18pt+) Failed
Use red on white
Use white on red

Grey

  • Contrast ratio 3.62:1
  • WCAG 2 AA Compliant Failed
  • WCAG 2 AA Compliant(18pt+) Passed
  • WCAG 2 AAA Compliant Failed
  • WCAG 2 AAA Compliant(18pt+) Failed
Use red on grey
Use grey on red

Background blue

  • Contrast ratio 1.52:1
  • WCAG 2 AA Compliant Failed
  • WCAG 2 AA Compliant(18pt+) Failed
  • WCAG 2 AAA Compliant Failed
  • WCAG 2 AAA Compliant(18pt+) Failed
Avoid red on background blue
Avoid using background colours on red

Background grey

  • Contrast ratio 1.56:1
  • WCAG 2 AA Compliant Failed
  • WCAG 2 AA Compliant(18pt+) Failed
  • WCAG 2 AAA Compliant Failed
  • WCAG 2 AAA Compliant(18pt+) Failed
Avoid red on background grey
Avoid using background colours on red

Background red

  • Contrast ratio 1.39:1
  • WCAG 2 AA Compliant Failed
  • WCAG 2 AA Compliant(18pt+) Failed
  • WCAG 2 AAA Compliant Failed
  • WCAG 2 AAA Compliant(18pt+) Failed
Avoid red on background red
Avoid using background colours on red

Background green

  • Contrast ratio 1.55:1
  • WCAG 2 AA Compliant Failed
  • WCAG 2 AA Compliant(18pt+) Failed
  • WCAG 2 AAA Compliant Failed
  • WCAG 2 AAA Compliant(18pt+) Failed
Avoid red on background green
Avoid using background colours on red

Background yellow

  • Contrast ratio 1.75:1
  • WCAG 2 AA Compliant Failed
  • WCAG 2 AA Compliant(18pt+) Failed
  • WCAG 2 AAA Compliant Failed
  • WCAG 2 AAA Compliant(18pt+) Failed
Avoid red on background yellow
Avoid using background colours on red

Background cream

  • Contrast ratio 1.93:1
  • WCAG 2 AA Compliant Failed
  • WCAG 2 AA Compliant(18pt+) Failed
  • WCAG 2 AAA Compliant Failed
  • WCAG 2 AAA Compliant(18pt+) Failed
Avoid red on background cream
Avoid using background colours on red