Design
Language
System

DLS v20150818

Belonging & Accessibility

Accessibility is often viewed as making a site work on screen readers. In reality, web accessibility is the practice of designing and developing with empathy to make experiences that are functional and enjoyable to the widest range of people possible, including those who are differently-abled. Consider the following if you aim to create places of belonging across the web and devices:

visual

This can included non-sighted users, users with low-vision, users with obstructed vision, or simply baby boomers with aging eyesight. Consider people whose vision is altered by factors like Myopia, Color blindness, Glaucoma, or Albinism.

COGNITIVE

Relates to the ease or difficult of processing of information like people in our community who go about their daily lives with Down’s Syndrome, autism, global developmental delay, or dyslexia.

motor

People with motor impairments typically use a wide range of assistive technology from specialized keyboards, to eye trackers, to using single buttons to navigate their computer. How might someone with RSI, cerebral palsy, Parkinson's, or muscular dystrophy use what you make?

AUDITORY

The web is a visual medium, but captions and fallbacks for sound-necessary media need to be considered for hearing impaired users, as well as those with Presbycusis, acoustic trauma, auditory processing disorders, or otosclerosis.

The human aging process starts when we turn 20. People in their 40’s already have reduced eyesight and require better contrast than designers and developers in their 20’s.

Color palette

Below you'll find accessibility scores for our house font on top of the extended brand palette . Use the ratings (AAA, AA, or FAIL) to make more empathic and inclusive choices when designing and building Airbnb experiences. 
Circular Light (14 px)
Circular Book (14 px)
Circular Light (18 px)
Circular Book (18 px)

HEX C2262B
Fail
Ratio 1.65
Circular Book
14 px font

HEX E9464C
Fail
Ratio 2.49
Circular Book
14 px font

HEX FF5A5F
Fail
Ratio 3.14
Circular Book
14 px font

HEX C2262B
Pass (AA)
Ratio 5.82
Circular Book
14 px font

HEX E9464C
Fail
Ratio 3.86
Circular Book
14 px font

HEX FF5A5F
Fail
Ratio 3.05
Circular Book
14 px font

HEX E84B1B
Fail
Ratio 2.49
Circular Book
14 px font

HEX FA7C47
Fail
Ratio 3.67
Circular Book
14 px font

HEX FF9C5A
Pass (AA)
Ratio 4.64
Circular Book
14 px font

HEX E84B1B
Fail
Ratio 3.85
Circular Book
14 px font

HEX FA7C47
Fail
Ratio 2.61
Circular Book
14 px font

HEX FF9C5A
Fail
Ratio 2.07
Circular Book
14 px font

HEX FA9300
Fail
Ratio 4.22
Circular Book
14 px font

HEX FFB400
Pass (AA)
Ratio 5.38
Circular Book
14 px font

HEX FFCA41
Pass (AA)
Ratio 6.29
Circular Book
14 px font

HEX FA9300
Fail
Ratio 2.27
Circular Book
14 px font

HEX FFB400
Fail
Ratio 1.78
Circular Book
14 px font

HEX FFCA41
Fail
Ratio 1.52
Circular Light
14 px font

HEX 03946F
Fail
Ratio 2.50
Circular Book
14 px font

HEX 00B97D
Fail
Ratio 3.76
Circular Book
14 px font

HEX 05DB92
Pass (AA)
Ratio 5.28
Circular Book
14 px font

HEX 03946F
Fail
Ratio 3.84
Circular Book
14 px font

HEX 00B97D
Fail
Ratio 2.55
Circular Book
14 px font

HEX 05DB92
Fail
Ratio 1.82
Circular Book
14 px font

HEX 007A87
Fail
Ratio 1.89
Circular Book
14 px font

HEX 02B4A6
Fail
Ratio 3.69
Circular Book
14 px font

HEX 00D1C1
Pass (AA)
Ratio 4.97
Circular Book
14 px font

HEX 007A87
Pass (AA)
Ratio 5.08
Circular Book
14 px font

HEX 02B4A6
Fail
Ratio 2.60
Circular Book
14 px font

HEX 00D1C1
Fail
Ratio 1.93
Circular Book
14 px font

HEX 7B0051
Fail
Ratio 1.12
Circular Book
14 px font

HEX A32277
Fail
Ratio 1.39
Circular Book
14 px font

HEX CE4BA1
Fail
Ratio 2.35
Circular Book
14 px font

HEX 7B0051
Pass (AA)
Ratio 10.71
Circular Book
14 px font

HEX A32277
Pass (AA)
Ratio 6.88
Circular Book
14 px font

HEX CE4BA1
Fail
Ratio 4.08
Circular Book
14 px font

HEX B6A868
Fail
Ratio 4.01
Circular Book
14 px font

HEX C6B878
Pass (AA)
Ratio 4.81
Circular Book
14 px font

HEX D8CA8F
Pass (AA)
Ratio 5.83
Circular Book
14 px font

HEX B6A868
Fail
Ratio 2.39
Circular Book
14 px font

HEX C6B878
Fail
Ratio 1.99
Circular Book
14 px font

HEX D8CA8F
Fail
Ratio 1.65
Circular Book
14 px font

HEX 454545
Fail
Ratio 1.00
Circular Book
14 px font

HEX 515151
Fail
Ratio 1.21
Circular Book
14 px font

HEX BBBDB3
Pass (AA)
Ratio 5.04
Circular Book
14 px font

HEX 454545
Pass (AAA)
Ratio 9.59
Circular Book
14 px font

HEX 515151
Pass (AAA)
Ratio 7.94
Circular Book
14 px font

HEX BBBDB3
Fail
Ratio 1.90
Circular Book
14 px font

HEX C2262B
Fail
Ratio 1.65
Circular Book
14 px font

HEX E9464C
Fail
Ratio 2.49
Circular Book
14 px font

HEX FF5A5F
Fail
Ratio 3.14
Circular Book
14 px font

HEX C2262B
Pass (AA)
Ratio 5.82
Circular Book
14 px font

HEX E9464C
Fail
Ratio 3.86
Circular Book
14 px font

HEX FF5A5F
Fail
Ratio 3.05
Circular Book
14 px font

HEX E84B1B
Fail
Ratio 2.49
Circular Book
14 px font

HEX FA7C47
Fail
Ratio 3.67
Circular Book
14 px font

HEX FF9C5A
Pass (AA)
Ratio 4.64
Circular Book
14 px font

HEX E84B1B
Fail
Ratio 3.85
Circular Book
14 px font

HEX FA7C47
Fail
Ratio 2.61
Circular Book
14 px font

HEX FF9C5A
Fail
Ratio 2.07
Circular Book
14 px font

HEX FA9300
Fail
Ratio 4.22
Circular Book
14 px font

HEX FFB400
Pass (AA)
Ratio 5.38
Circular Book
14 px font

HEX FFCA41
Pass (AA)
Ratio 6.29
Circular Book
14 px font

HEX FA9300
Fail
Ratio 2.27
Circular Book
14 px font

HEX FFB400
Fail
Ratio 1.78
Circular Book
14 px font

HEX FFCA41
Fail
Ratio 1.52
Circular Book
14 px font

HEX 03946F
Fail
Ratio 2.50
Circular Book
14 px font

HEX 00B97D
Fail
Ratio 3.76
Circular Book
14 px font

HEX 05DB92
Pass (AA)
Ratio 5.28
Circular Book
14 px font

HEX 03946F
Fail
Ratio 3.84
Circular Book
14 px font

HEX 00B97D
Fail
Ratio 2.55
Circular Book
14 px font

HEX 05DB92
Fail
Ratio 1.82
Circular Book
14 px font

HEX 007A87
Fail
Ratio 1.89
Circular Book
14 px font

HEX 02B4A6
Fail
Ratio 3.69
Circular Book
14 px font

HEX 00D1C1
Pass (AA)
Ratio 4.97
Circular Book
14 px font

HEX 007A87
Pass (AA)
Ratio 5.08
Circular Book
14 px font

HEX 02B4A6
Fail
Ratio 2.60
Circular Book
14 px font

HEX 00D1C1
Fail
Ratio 1.93
Circular Book
14 px font

HEX 7B0051
Fail
Ratio 1.12
Circular Book
14 px font

HEX A32277
Fail
Ratio 1.39
Circular Book
14 px font

HEX CE4BA1
Fail
Ratio 2.35
Circular Book
14 px font

HEX 7B0051
Pass (AA)
Ratio 10.71
Circular Book
14 px font

HEX A32277
Pass (AA)
Ratio 6.88
Circular Book
14 px font

HEX CE4BA1
Fail
Ratio 4.08
Circular Book
14 px font

HEX B6A868
Fail
Ratio 4.01
Circular Book
14 px font

HEX C6B878
Pass (AA)
Ratio 4.81
Circular Book
14 px font

HEX D8CA8F
Pass (AA)
Ratio 5.83
Circular Book
14 px font

HEX B6A868
Fail
Ratio 2.39
Circular Book
14 px font

HEX C6B878
Fail
Ratio 1.99
Circular Book
14 px font

HEX D8CA8F
Fail
Ratio 1.65
Circular Book
14 px font

HEX 454545
Fail
Ratio 1.00
Circular Book
14 px font

HEX 515151
Fail
Ratio 1.21
Circular Book
14 px font

HEX BBBDB3
Pass (AA)
Ratio 5.04
Circular Book
14 px font

HEX 454545
Pass (AAA)
Ratio 9.59
Circular Book
14 px font

HEX 515151
Pass (AAA)
Ratio 7.94
Circular Book
14 px font

HEX BBBDB3
Fail
Ratio 1.90
Circular Book
14 px font

HEX C2262B
Fail
Ratio 1.65
Circular Book
18 px font

HEX E9464C
Fail
Ratio 2.49
Circular Book
18 px font

HEX FF5A5F
Fail
Ratio 3.14
Circular Book
18 px font

HEX C2262B
Pass (AA)
Ratio 5.82
Circular Book
18 px font

HEX E9464C
Fail
Ratio 3.86
Circular Book
18 px font

HEX FF5A5F
Fail
Ratio 3.05
Circular Book
18 px font

HEX E84B1B
Fail
Ratio 2.49
Circular Book
18 px font

HEX FA7C47
Fail
Ratio 3.67
Circular Book
18 px font

HEX FF9C5A
Pass (AA)
Ratio 4.64
Circular Book
18 px font

HEX E84B1B
Fail
Ratio 3.85
Circular Book
18 px font

HEX FA7C47
Fail
Ratio 2.61
Circular Book
18 px font

HEX FF9C5A
Fail
Ratio 2.07
Circular Book
18 px font

HEX FA9300
Fail
Ratio 4.22
Circular Book
18 px font

HEX FFB400
Pass (AA)
Ratio 5.38
Circular Book
18 px font

HEX FFCA41
Pass (AA)
Ratio 6.29
Circular Book
18 px font

HEX FA9300
Fail
Ratio 2.27
Circular Book
18 px font

HEX FFB400
Fail
Ratio 1.78
Circular Book
18 px font

HEX FFCA41
Fail
Ratio 1.52
Circular Book
18 px font

HEX 03946F
Fail
Ratio 2.50
Circular Book
18 px font

HEX 00B97D
Fail
Ratio 3.76
Circular Book
18 px font

HEX 05DB92
Pass (AA)
Ratio 5.28
Circular Book
18 px font

HEX 03946F
Fail
Ratio 3.84
Circular Book
18 px font

HEX 00B97D
Fail
Ratio 2.55
Circular Book
18 px font

HEX 05DB92
Fail
Ratio 1.82
Circular Book
18 px font

HEX 007A87
Fail
Ratio 1.89
Circular Book
18 px font

HEX 02B4A6
Fail
Ratio 3.69
Circular Book
18 px font

HEX 00D1C1
Pass (AA)
Ratio 4.97
Circular Book
18 px font

HEX 007A87
Pass (AA)
Ratio 5.08
Circular Book
18 px font

HEX 02B4A6
Fail
Ratio 2.60
Circular Book
18 px font

HEX 00D1C1
Fail
Ratio 1.93
Circular Book
18 px font

HEX 7B0051
Fail
Ratio 1.12
Circular Book
18 px font

HEX A32277
Fail
Ratio 1.39
Circular Book
18 px font

HEX CE4BA1
Fail
Ratio 2.35
Circular Book
18 px font

HEX 7B0051
Pass (AA)
Ratio 10.71
Circular Book
18 px font

HEX A32277
Pass (AA)
Ratio 6.88
Circular Book
18 px font

HEX CE4BA1
Fail
Ratio 4.08
Circular Book
18 px font

HEX B6A868
Fail
Ratio 4.01
Circular Book
18 px font

HEX C6B878
Pass (AA)
Ratio 4.81
Circular Book
18 px font

HEX D8CA8F
Pass (AA)
Ratio 5.83
Circular Book
18 px font

HEX B6A868
Fail
Ratio 2.39
Circular Book
18 px font

HEX C6B878
Fail
Ratio 1.99
Circular Book
18 px font

HEX D8CA8F
Fail
Ratio 1.65
Circular Book
18 px font

HEX 454545
Fail
Ratio 1.00
Circular Book
18 px font

HEX 515151
Fail
Ratio 1.21
Circular Book
18 px font

HEX BBBDB3
Pass (AA)
Ratio 5.04
Circular Book
18 px font

HEX 454545
Pass (AAA)
Ratio 9.59
Circular Book
18 px font

HEX 515151
Pass (AAA)
Ratio 7.94
Circular Book
18 px font

HEX BBBDB3
Fail
Ratio 1.90
Circular Book
18 px font

HEX C2262B
Fail
Ratio 1.65
Circular Book
18 px font

HEX E9464C
Fail
Ratio 2.49
Circular Book
18 px font

HEX FF5A5F
Fail
Ratio 3.14
Circular Book
18 px font

HEX C2262B
Pass (AA)
Ratio 5.82
Circular Book
18 px font

HEX E9464C
Fail
Ratio 3.86
Circular Book
18 px font

HEX FF5A5F
Fail
Ratio 3.05
Circular Book
18 px font

HEX E84B1B
Fail
Ratio 2.49
Circular Book
18 px font

HEX FA7C47
Fail
Ratio 3.67
Circular Book
18 px font

HEX FF9C5A
Pass (AA)
Ratio 4.64
Circular Book
18 px font

HEX E84B1B
Fail
Ratio 3.85
Circular Book
18 px font

HEX FA7C47
Fail
Ratio 2.61
Circular Book
18 px font

HEX FF9C5A
Fail
Ratio 2.07
Circular Book
18 px font

HEX FA9300
Fail
Ratio 4.22
Circular Book
18 px font

HEX FFB400
Pass (AA)
Ratio 5.38
Circular Book
18 px font

HEX FFCA41
Pass (AA)
Ratio 6.29
Circular Book
18 px font

HEX FA9300
Fail
Ratio 2.27
Circular Book
18 px font

HEX FFB400
Fail
Ratio 1.78
Circular Book
18 px font

HEX FFCA41
Fail
Ratio 1.52
Circular Book
18 px font

HEX 03946F
Fail
Ratio 2.50
Circular Book
18 px font

HEX 00B97D
Fail
Ratio 3.76
Circular Book
18 px font

HEX 05DB92
Pass (AA)
Ratio 5.28
Circular Book
18 px font

HEX 03946F
Fail
Ratio 3.84
Circular Book
18 px font

HEX 00B97D
Fail
Ratio 2.55
Circular Book
18 px font

HEX 05DB92
Fail
Ratio 1.82
Circular Book
18 px font

HEX 007A87
Fail
Ratio 1.89
Circular Book
18 px font

HEX 02B4A6
Fail
Ratio 3.69
Circular Book
18 px font

HEX 00D1C1
Pass (AA)
Ratio 4.97
Circular Book
18 px font

HEX 007A87
Pass (AA)
Ratio 5.08
Circular Book
18 px font

HEX 02B4A6
Fail
Ratio 2.60
Circular Book
18 px font

HEX 00D1C1
Fail
Ratio 1.93
Circular Book
18 px font

HEX 7B0051
Fail
Ratio 1.12
Circular Book
18 px font

HEX A32277
Fail
Ratio 1.39
Circular Book
18 px font

HEX CE4BA1
Fail
Ratio 2.35
Circular Book
18 px font

HEX 7B0051
Pass (AA)
Ratio 10.71
Circular Book
18 px font

HEX A32277
Pass (AA)
Ratio 6.88
Circular Book
18 px font

HEX CE4BA1
Fail
Ratio 4.08
Circular Book
18 px font

HEX B6A868
Fail
Ratio 4.01
Circular Book
18 px font

HEX C6B878
Pass (AA)
Ratio 4.81
Circular Book
18 px font

HEX D8CA8F
Pass (AA)
Ratio 5.83
Circular Book
18 px font

HEX B6A868
Fail
Ratio 2.39
Circular Book
18 px font

HEX C6B878
Fail
Ratio 1.99
Circular Book
18 px font

HEX D8CA8F
Fail
Ratio 1.65
Circular Book
18 px font

HEX 454545
Fail
Ratio 1.00
Circular Book
18 px font

HEX 515151
Fail
Ratio 1.21
Circular Book
18 px font

HEX BBBDB3
Pass (AA)
Ratio 5.04
Circular Book
18 px font

HEX 454545
Pass (AAA)
Ratio 9.59
Circular Book
18 px font

HEX 515151
Pass (AAA)
Ratio 7.94
Circular Book
18 px font

HEX BBBDB3
Fail
Ratio 1.90
Circular Book
18 px font

rating system

The Web Content Accessibility Guidelines 2.0 (WCAG) consist of consists of 12 guidelines organized under four principles (websites must be perceivable, operable, understandable and robust). Contrast for text must meet the following ratings to be acceptable and inclusive: 

AA = good

To receive a rating of AA, regular sized text requires a ratio score greater than 4.5 to 1. Large sized text (meaning 18 px or larger) requires a minimum ratio of 3 to 1 or greater.

AAA = best

To receive a rating of AAA, regular sized text requires a ratio score greater than 7 to 1. Large sized text (meaning 18 px or larger) requires a minimum ratio of 4.5 to 1 or greater.

more information

In order for a webpage to conform to WCAG 2.0 standards, these conformance requirements must be satisfied.

Need help?

Slack #the-alliance to ask questions or get help using these guidelines