LP6 Style Guide: Sections page Template = lp6-docs

Sections

Next: Accessibility ›

.bg-primary--full

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-secondary--full

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-tertiary--full

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-primary

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-secondary

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-tertiary

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-sec-dark

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-sec-medium

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-sec-light

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-sec-white

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

.bg-sec-black

Single origin trifecta strong affogato macchiato froth whipped. Fair trade saucer so, et, qui aromatic, extra as half and half qui cultivar. Mazagran, kopi-luwak whipped aroma, roast, grinder mug in sugar saucer black. Cortado crema mazagran a, acerbic sit breve steamed spoon black breve coffee. Rich aromatic froth iced dark half and half that medium. Half and half barista aged instant whipped arabica to go dark frappuccino seasonal plunger pot ristretto.

Accessibility

‹ Previous: Overview | Next: Usage ›

Color Contrast

The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium, the main international standards organization for the Internet.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. Note that for some color combinations the contrast ratio will be lower with white text than with black. However, actual readability/usability studies have shown that white is largely considered easier to read on bright blue and orange backgrounds (See, The Myths of Color Contrast Accessibility). To increase readability in some situations, we default to regular weight font instead of the default light weight.

Primary (Dark Green) Contrast

Ratio: 10.99:1 | Source: WebAIM

var(--color-sec-white): #FFFFFF;
var(--color-brand-primary): #004712;
Secondary (Light Green) Contrast

Ratio: 11.5:1 | Source: WebAIM

var(--color-sec-dark): #000000;
var(--color-brand-secondary): #a6ce39;
Tertiary (Yellow) Contrast

Ratio: 10.93:1 | Source: WebAIM

var(--color-sec-black): #000000;
var(--color-brand-tertiary): #eeb111;
Primary Tint (Dark Green) Contrast

Ratio: 8.65:1 | Source: WebAIM

var(--color-sec-dark): #414042;
var(--color-brand-primary--10): #E6EDE7;
Secondary Tint (Light Green) Contrast

Ratio: 9.71:1 | Source: WebAIM

var(--color-sec-dark): #414042;
var(--color-brand-secondary--10): #F6FAEB;
Tertiary Tint (Yellow) Contrast

Ratio: 9.64:1 | Source: WebAIM

var(--color-sec-dark): #414042;
var(--color-brand-tertiary--10): #FDF7E7;
Dark Grey Tint Contrast

Ratio: 8.72:1 | Source: WebAIM

var(--color-sec-dark): #414042;
var(--color-sec-dark--10): #ECECEC;
Medium Grey Tint Contrast

Ratio: 8.88:1 | Source: WebAIM

var(--color-sec-dark): #414042;
var(--color-sec-medium--10): #EEEEEE;
Light Grey Tint Contrast

Ratio: 9.87:1 | Source: WebAIM

var(--color-sec-dark): #414042;
var(--color-sec-light--10): #FAFAFA;

Usage

‹ Previous: Accessibility

Wait on first review session.