Color
Primary color
Text color
Background color
STORIESMake an impressionMake a big impression with this clean, modern, and mobile-friendly site. Use it to communicate information to people inside or outisde your team. Share your ideas, results, and more in this visually compelling format.
Cameron Evans
Senior Researcher at Contoso
Content
Accessibility checker
Looking good! Your color palette doesn't have any accessibility issues.
Contrast ratio: AA
Slot pair
Non accessible pairs(0)
Accessible pairs(6)
12.98
neutralPrimary on white
4.53
white on themePrimary
11.80
neutralPrimary on neutralLighter
4.91
themeDarkAlt on neutralLighter
12.23
neutralPrimary on themeLighterAlt
5.09
themeDarkAlt on themeLighterAlt
Fabric palette
| Primary | Hex | Foreground | Hex | Background | Hex |
|---|---|---|---|---|---|
themeDarker | #004377 | black | #494847 | neutralTertiaryAlt | #c8c8c8 |
themeDark | #005ba1 | neutralDark | #605e5d | neutralQuaternary | #d0d0d0 |
themeDarkAlt | #006cbe | neutralPrimary | #323130 | neutralQuaternaryAlt | #dadada |
themePrimary | #0078d4 | neutralPrimaryAlt | #8d8b8a | neutralLight | #eaeaea |
themeSecondary | #1a86d9 | neutralSecondary | #a3a2a0 | neutralLighter | #f4f4f4 |
themeTertiary | #5ca9e5 | neutralTertiary | #c8c8c8 | neutralLighterAlt | #f8f8f8 |
themeLight | #a9d3f2 | white | #ffffff | ||
themeLighter | #d0e7f8 | ||||
themeLighterAlt | #f3f9fd |
Semantic slots
Slot name
None
Netural
Soft
Strong
Defaults(13)
bodyBackground
white
neturalLighter
themeLighterAlt
themePrimary
bodyStandoutBackground
neutralLighterAlt
neutralLight
themeLighter
themeDarkAlt
bodyFrameBackground
white
neutralLight
themeLighter
themeDarkAlt
bodyFrameDivider
neutralLight
neutralLight
themeLighter
themeDarkAlt
bodyText
neutralPrimary
neutralPrimary
neutralPrimary
white
bodyTextChecked
black
N/A
N/A
N/A
bodySubtext
neutralSecondary
neutralSecondary
neutralSecondary
white
bodyDivider
neutralLight
neutralQuaternaryAlt
neutralQuaternaryAlt
themeTertiary
disabledBodyText
neutralTertiary
neturalTertiary
neturalTertiary
neutralQuaternary
focusBorder
neutralSecondary
neutralSecondary
neutralSecondary
white
variantBorder
neutralLight
neutralLight
neutralLight
themeDarkAlt
variantBorderHovered
neutralTertiary
neutralTertiary
neutralTertiary
themeDarker
defaultStateBackground
neutralLighterAlt
neutralLight
neutralLight
neutralLightAlt
Links(4)
Buttons(25)
Inputs(14)
Lists(7)
Menus(8)