{"componentChunkName":"component---src-pages-guidelines-color-overview-mdx","path":"/guidelines/color/overview/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Color","description":"Maintaining consistent and engaging digital interfaces throughout IBM, whether applications or experiences, demands extended guidance around color usage.","tabs":["Overview","Usage"]},"relativePagePath":"/guidelines/color/overview.mdx","titleType":"prepend","MdxNode":{"id":"3c9825fa-c921-55de-8316-9b5fc0287ec0","children":[],"parent":"85e6ee99-643b-51d5-a73e-1678e0a07254","internal":{"content":"---\ntitle: Color\ndescription: Maintaining consistent and engaging digital interfaces throughout IBM, whether applications or experiences, demands extended guidance around color usage.\ntabs: ['Overview', 'Usage']\n---\n\nimport ColorBlock from 'components/ColorBlock';\nimport ColorGrid from 'components/ColorGrid';\n\n### Maintaining consistent and engaging digital interfaces throughout IBM, whether applications or experiences, demands extended guidance around color usage. The following concepts are the foundation as we strive to achieve balance and harmony through our User Interface design.\n\n<AnchorLinks>\n\n<AnchorLink>Introduction</AnchorLink>\n<AnchorLink>Color anatomy</AnchorLink>\n<AnchorLink>Implementing color</AnchorLink>\n<AnchorLink>Accessibility</AnchorLink>\n\n</AnchorLinks>\n\n<Video vimeoId=\"281513790\" />\n\n## Resources\n\n<Row className=\"resource-card-group\">\n<Column  colLg={4} colMd={4} noGutterSm>\n  <ResourceCard\n    subTitle=\"RGB color palettes (.ase and .clr)\"\n    href=\"https://www.carbondesignsystem.com/files/IBM_Colors_RGB.zip\"\n    >\n\n<MdxIcon name=\"ase\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4}  noGutterSm>\n  <ResourceCard\n    subTitle=\"Elements package: Color\"\n    href=\"https://github.com/carbon-design-system/carbon/tree/master/packages/colors\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n<br />\n\n<br />\n\n## Introduction\n\nApplication of the color palette brings a unified and recognizable consistency\nto IBM's vast array of digital products and interfaces. This consistency is\ngrounded by a set of well-defined rules on how to work with the Carbon component\nlibrary in the context of dark and light themes.\n\n![Color in UI](images/IBM_UI_Screens.gif)\n\n<Caption></Caption>\n\n## Color anatomy\n\nCarbon's default themes are derived from the IBM Design Language color palette.\nThe Neutral Gray family is dominant in the default themes, making use of subtle\nshifts in value to help organize content into distinct zones.\n\nThe core Blue family serves as the primary action color across all IBM products\nand experiences. Additional colors are used sparingly and purposefully.\n\n<ColorGrid colorFamily=\"blue\" />\n<ColorGrid colorFamily=\"gray\" />\n{/* possible TODO: remove inline style */}\n<ColorGrid colorFamily=\"alerts\" style=\"margin-top: 2rem\" />\n<Caption>Alerts Colors</Caption>\n\n## Implementing color\n\nCarbon uses _tokens_ and _themes_ to manage color. Tokens are role-based, and\nthemes specify the color values that serve those roles in the UI.\n\n| Term    | Definition                                                                                                  |     |\n| ------- | ----------------------------------------------------------------------------------------------------------- | --- |\n| _Theme_ | The set of unique values assigned to the tokens of a Carbon interface                                       |     |\n| _Token_ | The code identifier for a unique role or set of roles. Tokens are universal and never change across themes. |     |\n| _Role_  | The systematic usage(s) of a token. Roles cannot be changed between themes.                                 |     |\n| _Value_ | The actual style (i.e. hex code) assigned to a token                                                        |     |\n\n### Tokens\n\nColor in Carbon is managed using color tokens. Tokens are a method of\nabstracting color by role or usage, independent of the actual color values. For\nexample, instead of needing to code all instances of input labels in a UI to be\n`#565656`, the _form_ component in Carbon specifies the token `$text-02` for\nthese lables, and that token is specified in a separate theme file to be\n`#565656`. For a different theme, that same `text-02` token could be mapped to a\ndifferent hex value, like `#ffffff`. Thus, tokens not only allow for more\nefficient color updates within a theme, but also enable any UI (or portion of a\nUI) built with Carbon to easily switch between different themes.\n\nA single token can be associated with multiple roles, but only if the color\nvalue is used consistently across those roles. This allows for uniform color\napplication across themes while maintaining full styling flexibility.\n\nWith this system, all Carbon users can create their own themes by assigning new\nvalues to the established color tokens. IBM products should use one of the four\nIBM default themes.\n\n### Themes\n\nThemes serve as an organizational framework for color in Carbon, with each theme\nbased on a specific primary background color. There are two default \"light\"\nthemes and two default \"dark\" themes. The light themes use White and Gray 10\nbackgrounds, and the dark themes use Gray 100 and Gray 90 backgrounds. Default\ncolor tokens are provided for each component based on the primary background\ncolor.\n\n<Row class=\"color-blocks\">\n<Column colSm={1} colMd={1} colLg={2}>\n\n<div class=\"bx--aspect-ratio bx--aspect-ratio--1x1\">\n  <div class=\"bx--aspect-ratio--object color-square color-square--white\">\n    White\n  </div>\n</div>\n\n<div class=\"bx--caption\">Light</div>\n\n</Column>\n<Column colSm={1} colMd={1} colLg={2}>\n\n<div class=\"bx--aspect-ratio bx--aspect-ratio--1x1\">\n  <div class=\"bx--aspect-ratio--object color-square color-square--gray-10\">\n    Gray 10\n  </div>\n</div>\n\n</Column>\n<Column colSm={1} colMd={1} colLg={2}>\n\n<div class=\"bx--aspect-ratio bx--aspect-ratio--1x1\">\n  <div class=\"bx--aspect-ratio--object color-square color-square--gray-100\">\n    Gray 100\n  </div>\n</div>\n\n<div class=\"bx--caption\">Dark</div>\n\n</Column>\n<Column colSm={1} colMd={1} colLg={2}>\n\n<div class=\"bx--aspect-ratio bx--aspect-ratio--1x1\">\n  <div class=\"bx--aspect-ratio--object color-square color-square--gray-90\">\n    Gray 90\n  </div>\n</div>\n\n</Column>\n</Row>\n\n<br />\n\n#### Global background colors\n\n<br />\n\n| Theme    | Primary background      | Token            | Hex value |                                             |\n| -------- | ----------------------- | ---------------- | --------- | ------------------------------------------: |\n| White    | Global Background Light | `$ui-background` | `#ffffff` |  <ColorBlock size=\"xs\">#ffffff</ColorBlock> |\n| Gray 10  | Global Background Light | `$ui-background` | `#f3f3f3` | <ColorBlock  size=\"xs\">#f3f3f3</ColorBlock> |\n| Gray 90  | Global Background Dark  | `$ui-background` | `#282828` | <ColorBlock  size=\"xs\">#282828</ColorBlock> |\n| Gray 100 | Global Background Dark  | `$ui-background` | `#171717` | <ColorBlock  size=\"xs\">#171717</ColorBlock> |\n\n<br />\n\n#### Light themes\n\nGray 10 components are paired with White backgrounds to make the White theme and\nWhite components with Gray 10 backgrounds to make the Gray 10 theme. Some\ncomponents, such as buttons and toggles, share the same colors across both light\nthemes.\n\n<Row>\n<Column colMd={4} colLg={6}>\n  <DoDontExample type=\"do\" caption=\"Gray 10 dropdown on White background.\">\n\n![Gray 10 dropdown on White background.](images/Light_theme_01.png)\n\n  </DoDontExample>\n</Column>\n<Column colMd={4} colLg={6} >\n  <DoDontExample type=\"do\" caption=\"White dropdown on a Gray 10 background.\">\n\n![White dropdown on a Gray 10 background.](images/Light_theme_02.png)\n\n  </DoDontExample>\n</Column>\n</Row>\n\n<Row>\n<Column colMd={4} colLg={6}>\n  <DoDontExample type=\"do\" caption=\"White overflow menu on Gray 10 card.\">\n\n![White overflow menu on Gray 10 card.](images/Light_theme_03.png)\n\n  </DoDontExample>\n</Column>\n<Column colMd={4} colLg={6} >\n  <DoDontExample caption=\"Avoid use of midtones.\">\n\n![Avoid use of midtones.](images/Light_theme_04.png)\n\n  </DoDontExample>\n</Column>\n</Row>\n\n![light theme examples](images/Light_theme_sample_revised.gif)\n\n<Caption>Components with common colors across both light themes.</Caption>\n\n<br />\n\n#### Dark themes\n\nGray 90 components are paired with Gray 100 backgrounds to make the Gray 100\nTheme and Gray 80 components with Gray 90 backgrounds to make the Gray 90 Theme.\nSome components, such as buttons and toggles, share the same colors across both\nlight themes.\n\n<Row>\n<Column colMd={4} colLg={6}>\n  <DoDontExample\n    type=\"do\"\n    caption=\"Gray 90 dropdown on Gray 100 background.\">\n\n![Gray 10 dropdown on White background.](images/Dark_theme_01_new.png)\n\n  </DoDontExample>\n</Column>\n<Column colMd={4} colLg={6} >\n  <DoDontExample type=\"do\" caption=\"Gray 80 dropdown on Gray 90 background.\">\n\n![White dropdown on a Gray 10 background.](images/Dark_theme_02_new.png)\n\n  </DoDontExample>\n</Column>\n</Row>\n\n<Row>\n<Column colMd={4} colLg={6}>\n  <DoDontExample\n    type=\"do\"\n    caption=\"Gray 70 is sometimes used when compound components are being applied, such as an overflow menu.\">\n\n![White overflow menu on Gray 10 card.](images/Dark_theme_03_new.png)\n\n  </DoDontExample>\n</Column>\n<Column colMd={4} colLg={6} >\n  <DoDontExample caption=\"Do not apply components that are darker than the background unless using high-contrast mode.\">\n\n![Do not apply components that are darker than the background unless using high-contrast mode.](images/Dark_theme_04_new.png)\n\n  </DoDontExample>\n</Column>\n</Row>\n\n![dark theme examples](images/Dark_theme_sample_revised.gif)\n\n<Caption>\n  Components with common colors across both dark UI backgrounds.\n</Caption>\n\n<br />\n\n#### High contrast\n\nIn some cases, it is helpful to apply light components to dark backgrounds or\ndark components to light backgrounds. This technique is useful to focus\nattention or create visual tension.\n\n<Row>\n<Column colMd={4} colLg={6}>\n  <DoDontExample type=\"do\">\n\n![High contrast example in a light theme.](images/High_contrast_01.png)\n\n  </DoDontExample>\n</Column>\n<Column colMd={4} colLg={6} >\n  <DoDontExample type=\"do\">\n\n![High contrast example in a dark theme.](images/High_contrast_02.png)\n\n  </DoDontExample>\n</Column>\n</Row>\n\n### Interaction states\n\nIn addition to the enabled-state tokens above, the five other primary\ninteraction states have been defined and tokenized for each default theme. For\nvalues between Black and 70, interaction gets lighter, and for values between 60\nand White, interaction gets darker.\n\n#### Hover\n\nHover states have their own tokens. In the IBM default themes, these colors fall\noutside of the core palette steps and act as \"half steps\" between two adjacent\ncolors. The White theme shares the same hover value as the Gray 10 theme; the\ntwo dark theme backgrounds share a hover value as well.\n\n#### Active\n\nThe active state is two full steps lighter for values between 100 and 70 and two\nfull steps darker for values between 60 and 10. For example, the Blue 60 active\nstate is Blue 80. The exception is that White shares the same active state as\nGray 10, and Black shares the same active state as Gray 100.\n\n#### Selected\n\nThe selected state is one full step lighter for values between 100 and 70, and\none full step darker for values between 60 and 10. For example, the Blue 60\nselected state is Blue 70. The exception is that White shares the same selected\nstate as Gray 10, and Black shares the same selected state as Gray 100.\n\n#### Focus\n\nThe focus state usually appears as a Blue 60 border in the light theme and as a\nWhite border in the dark theme.\n\n#### Disabled\n\nDisabled components are unavailable for interaction, so they don't receive hover\nor focus and are not subject to WC3 contrast compliance standards. For the dark\nthemes, disabled values are two full steps lighter than their respective\nbackground. For light themes, they are two full steps darker. The exception is\nthat the White theme disabled value is Gray 30.\n\n![interactive states light](images/Interactive_states_light_new.png)\n\n<Caption>Light theme interactive tokens.</Caption>\n\n![interactive states dark](images/Interactive_states_dark_new.png)\n\n<Caption>Dark theme interactive tokens.</Caption>\n\n## Accessibility\n\nUsing various forms of contrast is the most important consideration when making\nuser-friendly color and interface choices. Awareness of standards and best\npractices is the key to accessible color selection.\n\nThe color families in the IBM palette contain ten values from 10 to 100. White\nand Black sit outside those values. Black text is WCAG AA accessible on colors\nranging from 10 to 50. White text is accessible on colors from 60 to 100.\n\n<ArtDirection>\n\n![Digital accessibility](images/wcag2-blues-mobile.svg)\n![Digital accessibility](images/wcag2-blues-desktop.svg)\n\n</ArtDirection>\n\nBeyond black and white, the IBM color palette provides a range of accessible\ncombinations. Subtracting the foreground value from the background value (or\nvice versa) helps determine whether that color combination meets the WCAG AA\ncontrast ratio success criteria. If the difference between two values is 50 or\ngreater, the colors are accessible. Anything below a difference of 50 may fail\naccessibility standards.\n\n<ArtDirection>\n\n![Blue color do dont accesible example](images/wcag-dos-donts-mobile.svg)\n![Blue color do dont accesible example](images/wcag-dos-donts-desktop.svg)\n\n</ArtDirection>\n\n<Caption>Blue color family, 60 background</Caption>\n\nFor a complete look at color-related accessibility topics in Carbon, visit the\n[Accessibility](/guidelines/accessibility/color) section.\n","type":"Mdx","contentDigest":"4defad048b28470143de312636bc8cd4","counter":1454,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Color","description":"Maintaining consistent and engaging digital interfaces throughout IBM, whether applications or experiences, demands extended guidance around color usage.","tabs":["Overview","Usage"]},"exports":{},"rawBody":"---\ntitle: Color\ndescription: Maintaining consistent and engaging digital interfaces throughout IBM, whether applications or experiences, demands extended guidance around color usage.\ntabs: ['Overview', 'Usage']\n---\n\nimport ColorBlock from 'components/ColorBlock';\nimport ColorGrid from 'components/ColorGrid';\n\n### Maintaining consistent and engaging digital interfaces throughout IBM, whether applications or experiences, demands extended guidance around color usage. The following concepts are the foundation as we strive to achieve balance and harmony through our User Interface design.\n\n<AnchorLinks>\n\n<AnchorLink>Introduction</AnchorLink>\n<AnchorLink>Color anatomy</AnchorLink>\n<AnchorLink>Implementing color</AnchorLink>\n<AnchorLink>Accessibility</AnchorLink>\n\n</AnchorLinks>\n\n<Video vimeoId=\"281513790\" />\n\n## Resources\n\n<Row className=\"resource-card-group\">\n<Column  colLg={4} colMd={4} noGutterSm>\n  <ResourceCard\n    subTitle=\"RGB color palettes (.ase and .clr)\"\n    href=\"https://www.carbondesignsystem.com/files/IBM_Colors_RGB.zip\"\n    >\n\n<MdxIcon name=\"ase\" />\n\n  </ResourceCard>\n</Column>\n<Column colLg={4} colMd={4}  noGutterSm>\n  <ResourceCard\n    subTitle=\"Elements package: Color\"\n    href=\"https://github.com/carbon-design-system/carbon/tree/master/packages/colors\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n<br />\n\n<br />\n\n## Introduction\n\nApplication of the color palette brings a unified and recognizable consistency\nto IBM's vast array of digital products and interfaces. This consistency is\ngrounded by a set of well-defined rules on how to work with the Carbon component\nlibrary in the context of dark and light themes.\n\n![Color in UI](images/IBM_UI_Screens.gif)\n\n<Caption></Caption>\n\n## Color anatomy\n\nCarbon's default themes are derived from the IBM Design Language color palette.\nThe Neutral Gray family is dominant in the default themes, making use of subtle\nshifts in value to help organize content into distinct zones.\n\nThe core Blue family serves as the primary action color across all IBM products\nand experiences. Additional colors are used sparingly and purposefully.\n\n<ColorGrid colorFamily=\"blue\" />\n<ColorGrid colorFamily=\"gray\" />\n{/* possible TODO: remove inline style */}\n<ColorGrid colorFamily=\"alerts\" style=\"margin-top: 2rem\" />\n<Caption>Alerts Colors</Caption>\n\n## Implementing color\n\nCarbon uses _tokens_ and _themes_ to manage color. Tokens are role-based, and\nthemes specify the color values that serve those roles in the UI.\n\n| Term    | Definition                                                                                                  |     |\n| ------- | ----------------------------------------------------------------------------------------------------------- | --- |\n| _Theme_ | The set of unique values assigned to the tokens of a Carbon interface                                       |     |\n| _Token_ | The code identifier for a unique role or set of roles. Tokens are universal and never change across themes. |     |\n| _Role_  | The systematic usage(s) of a token. Roles cannot be changed between themes.                                 |     |\n| _Value_ | The actual style (i.e. hex code) assigned to a token                                                        |     |\n\n### Tokens\n\nColor in Carbon is managed using color tokens. Tokens are a method of\nabstracting color by role or usage, independent of the actual color values. For\nexample, instead of needing to code all instances of input labels in a UI to be\n`#565656`, the _form_ component in Carbon specifies the token `$text-02` for\nthese lables, and that token is specified in a separate theme file to be\n`#565656`. For a different theme, that same `text-02` token could be mapped to a\ndifferent hex value, like `#ffffff`. Thus, tokens not only allow for more\nefficient color updates within a theme, but also enable any UI (or portion of a\nUI) built with Carbon to easily switch between different themes.\n\nA single token can be associated with multiple roles, but only if the color\nvalue is used consistently across those roles. This allows for uniform color\napplication across themes while maintaining full styling flexibility.\n\nWith this system, all Carbon users can create their own themes by assigning new\nvalues to the established color tokens. IBM products should use one of the four\nIBM default themes.\n\n### Themes\n\nThemes serve as an organizational framework for color in Carbon, with each theme\nbased on a specific primary background color. There are two default \"light\"\nthemes and two default \"dark\" themes. The light themes use White and Gray 10\nbackgrounds, and the dark themes use Gray 100 and Gray 90 backgrounds. Default\ncolor tokens are provided for each component based on the primary background\ncolor.\n\n<Row class=\"color-blocks\">\n<Column colSm={1} colMd={1} colLg={2}>\n\n<div class=\"bx--aspect-ratio bx--aspect-ratio--1x1\">\n  <div class=\"bx--aspect-ratio--object color-square color-square--white\">\n    White\n  </div>\n</div>\n\n<div class=\"bx--caption\">Light</div>\n\n</Column>\n<Column colSm={1} colMd={1} colLg={2}>\n\n<div class=\"bx--aspect-ratio bx--aspect-ratio--1x1\">\n  <div class=\"bx--aspect-ratio--object color-square color-square--gray-10\">\n    Gray 10\n  </div>\n</div>\n\n</Column>\n<Column colSm={1} colMd={1} colLg={2}>\n\n<div class=\"bx--aspect-ratio bx--aspect-ratio--1x1\">\n  <div class=\"bx--aspect-ratio--object color-square color-square--gray-100\">\n    Gray 100\n  </div>\n</div>\n\n<div class=\"bx--caption\">Dark</div>\n\n</Column>\n<Column colSm={1} colMd={1} colLg={2}>\n\n<div class=\"bx--aspect-ratio bx--aspect-ratio--1x1\">\n  <div class=\"bx--aspect-ratio--object color-square color-square--gray-90\">\n    Gray 90\n  </div>\n</div>\n\n</Column>\n</Row>\n\n<br />\n\n#### Global background colors\n\n<br />\n\n| Theme    | Primary background      | Token            | Hex value |                                             |\n| -------- | ----------------------- | ---------------- | --------- | ------------------------------------------: |\n| White    | Global Background Light | `$ui-background` | `#ffffff` |  <ColorBlock size=\"xs\">#ffffff</ColorBlock> |\n| Gray 10  | Global Background Light | `$ui-background` | `#f3f3f3` | <ColorBlock  size=\"xs\">#f3f3f3</ColorBlock> |\n| Gray 90  | Global Background Dark  | `$ui-background` | `#282828` | <ColorBlock  size=\"xs\">#282828</ColorBlock> |\n| Gray 100 | Global Background Dark  | `$ui-background` | `#171717` | <ColorBlock  size=\"xs\">#171717</ColorBlock> |\n\n<br />\n\n#### Light themes\n\nGray 10 components are paired with White backgrounds to make the White theme and\nWhite components with Gray 10 backgrounds to make the Gray 10 theme. Some\ncomponents, such as buttons and toggles, share the same colors across both light\nthemes.\n\n<Row>\n<Column colMd={4} colLg={6}>\n  <DoDontExample type=\"do\" caption=\"Gray 10 dropdown on White background.\">\n\n![Gray 10 dropdown on White background.](images/Light_theme_01.png)\n\n  </DoDontExample>\n</Column>\n<Column colMd={4} colLg={6} >\n  <DoDontExample type=\"do\" caption=\"White dropdown on a Gray 10 background.\">\n\n![White dropdown on a Gray 10 background.](images/Light_theme_02.png)\n\n  </DoDontExample>\n</Column>\n</Row>\n\n<Row>\n<Column colMd={4} colLg={6}>\n  <DoDontExample type=\"do\" caption=\"White overflow menu on Gray 10 card.\">\n\n![White overflow menu on Gray 10 card.](images/Light_theme_03.png)\n\n  </DoDontExample>\n</Column>\n<Column colMd={4} colLg={6} >\n  <DoDontExample caption=\"Avoid use of midtones.\">\n\n![Avoid use of midtones.](images/Light_theme_04.png)\n\n  </DoDontExample>\n</Column>\n</Row>\n\n![light theme examples](images/Light_theme_sample_revised.gif)\n\n<Caption>Components with common colors across both light themes.</Caption>\n\n<br />\n\n#### Dark themes\n\nGray 90 components are paired with Gray 100 backgrounds to make the Gray 100\nTheme and Gray 80 components with Gray 90 backgrounds to make the Gray 90 Theme.\nSome components, such as buttons and toggles, share the same colors across both\nlight themes.\n\n<Row>\n<Column colMd={4} colLg={6}>\n  <DoDontExample\n    type=\"do\"\n    caption=\"Gray 90 dropdown on Gray 100 background.\">\n\n![Gray 10 dropdown on White background.](images/Dark_theme_01_new.png)\n\n  </DoDontExample>\n</Column>\n<Column colMd={4} colLg={6} >\n  <DoDontExample type=\"do\" caption=\"Gray 80 dropdown on Gray 90 background.\">\n\n![White dropdown on a Gray 10 background.](images/Dark_theme_02_new.png)\n\n  </DoDontExample>\n</Column>\n</Row>\n\n<Row>\n<Column colMd={4} colLg={6}>\n  <DoDontExample\n    type=\"do\"\n    caption=\"Gray 70 is sometimes used when compound components are being applied, such as an overflow menu.\">\n\n![White overflow menu on Gray 10 card.](images/Dark_theme_03_new.png)\n\n  </DoDontExample>\n</Column>\n<Column colMd={4} colLg={6} >\n  <DoDontExample caption=\"Do not apply components that are darker than the background unless using high-contrast mode.\">\n\n![Do not apply components that are darker than the background unless using high-contrast mode.](images/Dark_theme_04_new.png)\n\n  </DoDontExample>\n</Column>\n</Row>\n\n![dark theme examples](images/Dark_theme_sample_revised.gif)\n\n<Caption>\n  Components with common colors across both dark UI backgrounds.\n</Caption>\n\n<br />\n\n#### High contrast\n\nIn some cases, it is helpful to apply light components to dark backgrounds or\ndark components to light backgrounds. This technique is useful to focus\nattention or create visual tension.\n\n<Row>\n<Column colMd={4} colLg={6}>\n  <DoDontExample type=\"do\">\n\n![High contrast example in a light theme.](images/High_contrast_01.png)\n\n  </DoDontExample>\n</Column>\n<Column colMd={4} colLg={6} >\n  <DoDontExample type=\"do\">\n\n![High contrast example in a dark theme.](images/High_contrast_02.png)\n\n  </DoDontExample>\n</Column>\n</Row>\n\n### Interaction states\n\nIn addition to the enabled-state tokens above, the five other primary\ninteraction states have been defined and tokenized for each default theme. For\nvalues between Black and 70, interaction gets lighter, and for values between 60\nand White, interaction gets darker.\n\n#### Hover\n\nHover states have their own tokens. In the IBM default themes, these colors fall\noutside of the core palette steps and act as \"half steps\" between two adjacent\ncolors. The White theme shares the same hover value as the Gray 10 theme; the\ntwo dark theme backgrounds share a hover value as well.\n\n#### Active\n\nThe active state is two full steps lighter for values between 100 and 70 and two\nfull steps darker for values between 60 and 10. For example, the Blue 60 active\nstate is Blue 80. The exception is that White shares the same active state as\nGray 10, and Black shares the same active state as Gray 100.\n\n#### Selected\n\nThe selected state is one full step lighter for values between 100 and 70, and\none full step darker for values between 60 and 10. For example, the Blue 60\nselected state is Blue 70. The exception is that White shares the same selected\nstate as Gray 10, and Black shares the same selected state as Gray 100.\n\n#### Focus\n\nThe focus state usually appears as a Blue 60 border in the light theme and as a\nWhite border in the dark theme.\n\n#### Disabled\n\nDisabled components are unavailable for interaction, so they don't receive hover\nor focus and are not subject to WC3 contrast compliance standards. For the dark\nthemes, disabled values are two full steps lighter than their respective\nbackground. For light themes, they are two full steps darker. The exception is\nthat the White theme disabled value is Gray 30.\n\n![interactive states light](images/Interactive_states_light_new.png)\n\n<Caption>Light theme interactive tokens.</Caption>\n\n![interactive states dark](images/Interactive_states_dark_new.png)\n\n<Caption>Dark theme interactive tokens.</Caption>\n\n## Accessibility\n\nUsing various forms of contrast is the most important consideration when making\nuser-friendly color and interface choices. Awareness of standards and best\npractices is the key to accessible color selection.\n\nThe color families in the IBM palette contain ten values from 10 to 100. White\nand Black sit outside those values. Black text is WCAG AA accessible on colors\nranging from 10 to 50. White text is accessible on colors from 60 to 100.\n\n<ArtDirection>\n\n![Digital accessibility](images/wcag2-blues-mobile.svg)\n![Digital accessibility](images/wcag2-blues-desktop.svg)\n\n</ArtDirection>\n\nBeyond black and white, the IBM color palette provides a range of accessible\ncombinations. Subtracting the foreground value from the background value (or\nvice versa) helps determine whether that color combination meets the WCAG AA\ncontrast ratio success criteria. If the difference between two values is 50 or\ngreater, the colors are accessible. Anything below a difference of 50 may fail\naccessibility standards.\n\n<ArtDirection>\n\n![Blue color do dont accesible example](images/wcag-dos-donts-mobile.svg)\n![Blue color do dont accesible example](images/wcag-dos-donts-desktop.svg)\n\n</ArtDirection>\n\n<Caption>Blue color family, 60 background</Caption>\n\nFor a complete look at color-related accessibility topics in Carbon, visit the\n[Accessibility](/guidelines/accessibility/color) section.\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/guidelines/color/overview.mdx"}}}}