# Color combinations

*Category:* Getting started
*Section:* Guidelines
*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/color-combinations
*Captured:* 2026-04-27T14:57:05.130Z

For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color. This contrast ensures people with moderately low vision can tell the colors apart and see your content.

## Color combinations

Dos and Don‘tsGoodBad

TextIconsLabels

### Example: Example 1

White text on brand backgrounds

white text on bg- primary

white text on bg- secondary

Black text on highlight backgrounds

black text on bg- primary

black text on bg- secondary

### Example: Example 2

White text on gray backgrounds

white text on bg- decent

white text on bg- lightest

white text on bg- lighter

white text on bg- light

white text on bg- gray

white text on bg- dark

white text on bg- darker

white text on bg- darkest

Black text on gray backgrounds

black text on bg- decent

black text on bg- lightest

black text on bg- lighter

black text on bg- light

black text on bg- gray

black text on bg- dark

black text on bg- darker

black text on bg- darkest

### Example: Example 3

White text on status backgrounds

white text on bg- info

white text on bg- success

white text on bg- warning

white text on bg- danger

Black text on status backgrounds

black text on bg- info

black text on bg- success

black text on bg- warning

black text on bg- danger

### Example: Example 4

White text on driving status backgrounds

white text on bg- status-available

white text on bg- status-driving

white text on bg- status-resting

white text on bg- status-working

Black text on driving status backgrounds

black text on bg- status-available

black text on bg- status-driving

black text on bg- status-resting

black text on bg- status-working

### Example: Example 5

White text on highlight backgrounds

white text on bg- highlight-decent

white text on bg- highlight-lightest

white text on bg- highlight-lighter

white text on bg- highlight-light

white text on bg- highlight

white text on bg- highlight-dark

white text on bg- highlight-darker

white text on bg- highlight-darkest

Black text on highlight backgrounds

black text on bg- highlight-decent

black text on bg- highlight-lightest

black text on bg- highlight-lighter

black text on bg- highlight-light

black text on bg- highlight

black text on bg- highlight-dark

black text on bg- highlight-darker

black text on bg- highlight-darkest

### Example: dark text on bg-decent

Gray text on gray backgrounds

decent text on bg- decent

lightest text on bg- decent

lighter text on bg- decent

light text on bg- decent

gray text on bg- decent

dark text on bg- decent

darker text on bg- decent

darkest text on bg- decent

decent text on bg- lightest

lightest text on bg- lightest

lighter text on bg- lightest

light text on bg- lightest

gray text on bg- lightest

dark text on bg- lightest

darker text on bg- lightest

darkest text on bg- lightest

decent text on bg- lighter

lightest text on bg- lighter

lighter text on bg- lighter

light text on bg- lighter

gray text on bg- lighter

dark text on bg- lighter

darker text on bg- lighter

darkest text on bg- lighter

decent text on bg- light

lightest text on bg- light

lighter text on bg- light

light text on bg- light

gray text on bg- light

dark text on bg- light

darker text on bg- light

darkest text on bg- light

decent text on bg- gray

lightest text on bg- gray

lighter text on bg- gray

light text on bg- gray

gray text on bg- gray

dark text on bg- gray

darker text on bg- gray

darkest text on bg- gray

decent text on bg- dark

lightest text on bg- dark

lighter text on bg- dark

light text on bg- dark

gray text on bg- dark

dark text on bg- dark

darker text on bg- dark

darkest text on bg- dark

decent text on bg- darker

lightest text on bg- darker

lighter text on bg- darker

light text on bg- darker

gray text on bg- darker

dark text on bg- darker

darker text on bg- darker

darkest text on bg- darker

decent text on bg- darkest

lightest text on bg- darkest

lighter text on bg- darkest

light text on bg- darkest

gray text on bg- darkest

dark text on bg- darkest

darker text on bg- darkest

darkest text on bg- darkest

### Example: Example 7

Status text on highlight backgrounds

info text on bg- highlight-decent

success text on bg- highlight-decent

warning text on bg- highlight-decent

danger text on bg- highlight-decent

info text on bg- highlight-lightest

success text on bg- highlight-lightest

warning text on bg- highlight-lightest

danger text on bg- highlight-lightest

info text on bg- highlight-lighter

success text on bg- highlight-lighter

warning text on bg- highlight-lighter

danger text on bg- highlight-lighter

info text on bg- highlight-light

success text on bg- highlight-light

warning text on bg- highlight-light

danger text on bg- highlight-light

info text on bg- highlight

success text on bg- highlight

warning text on bg- highlight

danger text on bg- highlight

info text on bg- highlight-dark

success text on bg- highlight-dark

warning text on bg- highlight-dark

danger text on bg- highlight-dark

info text on bg- highlight-darker

success text on bg- highlight-darker

warning text on bg- highlight-darker

danger text on bg- highlight-darker

info text on bg- highlight-darkest

success text on bg- highlight-darkest

warning text on bg- highlight-darkest

danger text on bg- highlight-darkest