Colorable 提供一組調(diào)色板，你可以為每一個色彩組合獲取合適的對比度值（包含 WCAG 可訪問性指南的及格/不及格分數(shù)），讓你的網(wǎng)頁可訪問性不出現(xiàn)色彩對比度問題。

用法

傳遞顏色字符串數(shù)組，或帶有顏色字符串的對象作為值

var  colorable  =  require ( 'colorable' ) 

var  colours  =  { 
  red : 'red' , 
  green : 'green' , 
  blue : 'blue' 
} 

var  result  =  colorable ( colors ,  {  compact : true ,  threshold : 0  } )

返回一個顏色數(shù)組，其中包含所有其他顏色及其 WCAG 對比度值的組合。

[
  {
    "hex": "#FF0000",
    "name": "red",
    "combinations": [
      {
        "hex": "#008000",
        "name": "green",
        "contrast": 1.28483997166146,
        "accessibility": {
          "aa": false,
          "aaLarge": false,
          "aaa": false,
          "aaaLarge": false
        }
      },
      {
        "hex": "#0000FF",
        "name": "blue",
        "contrast": 2.148936170212766,
        "accessibility": {
          "aa": false,
          "aaLarge": false,
          "aaa": false,
          "aaaLarge": false
        }
      }
    ]
  },
  ...
]

可訪問對象

每個鍵都是一個布爾值，表示顏色對比度是否滿足以下條件:

• aa - 大于4.5 (適用于正常大小的文本)
• aaLarge - 大于3 (粗體或大于 24 px 的文本)
• aaa - 大于 7
• aaaLarge - 大于 4.5

選項

compact

類型：Boolean（默認：false）

如果設(shè)置為true，則結(jié)果將是一個較小的對象，該對象僅包含十六進制值顏色字符串、每種顏色的名稱（如果將對象傳遞給函數(shù)）、對比度和可訪問性值。設(shè)置為 false，則結(jié)果還包括每種顏色的整個 harthur/color 對象，其中包括用于顏色操作的其他屬性和方法。

threshold

類型：數(shù)值（默認值：0）

設(shè)置后，可著色函數(shù)僅返回對比度高于此值的組合。適用于只查看比最低對比度級別高的顏色組合。

uniq

類型：布爾值（默認值：true）

設(shè)置為true，顏色數(shù)組通過 lodash.uniq 傳遞，以刪除重復(fù)項。