杩欏嚑骞碈SS鐣岀殑涓€浠跺ぇ浜嬪氨鏄瘡骞村勾鏈殑銆奡tate Of CSS銆嬶紝涔熷氨鏄疌SS鐘舵€佽皟鏌ワ紝鑰屻€奡tate Of CSS 2021銆嬫槸鍘诲勾骞村簳鍙戝竷鐨勩€傚湪鍏充簬鐗规€х殑绔犺妭涓紝浼氬垪鍑哄綋骞翠竴浜涙瘮杈冩柊鐨凜SS鐗规€х殑浣跨敤姒傚喌锛氭瘡涓浘浠ｈ〃涓€涓壒鎬э紝涓婂浘鏄牴鎹娇鐢ㄦ鏁版潵鍖哄垎鐨勩€傚鍦堟槸鍚杩囷紝鍐呭湀鏄垜鐢ㄨ繃锛屾渶鍚庡嚑琛屽熀鏈彲浠ョ悊瑙ｄ负娌″嚑涓汉鍚杩囷紝鐢ㄨ繃鐨勪汉灏辨洿灏戜簡銆傛湰鏂囧皢浠嬬粛涓€浜涘叧浜庨鑹茬殑鍐烽棬鏂扮壒鎬с€俢olor-gamut鑹插煙鑹插煙鏄?021骞存渶鍐烽棬鐨勭壒寰侊紝瀹冩槸浠€涔堬紵color-gamut鐩磋瘧灏辨槸鑹插煙銆傚畠灞炰簬濯掍綋鏌ヨ涔嬩竴锛屾湁3涓€硷細color-gamut:srgb;鑹插煙锛歱3锛涜壊鍩燂細rec2020锛涚敤娉曞涓嬶細@media(color-gamut:srgb){p{background:#f4ae8a;}}濡傛灉杩欎釜濯掍綋鏌ヨ琚懡涓紝缁撴灉鏄細濂界殑锛岄偅涔堣繖涓獟浣撴煡璇㈡槸骞蹭粈涔堢敤鐨勫憿锛熶粈涔堟槸鑹插煙锛熶粈涔堟槸鑹插煙锛熻壊鍩熸弿杩颁簡浜虹溂鍙互璇嗗埆鐨勮壊璋憋紙鍙鑹茶氨锛夊唴鐨勯鑹茶寖鍥淬€傜幇浠ｄ骇鍝佺敤浜庡啀鐜伴鑹茬殑鎶€鏈洜璁惧鑰屽紓锛屾暟鐮佺浉鏈恒€佹壂鎻忎华銆佹樉绀哄櫒銆佹墦鍗版満銆佸钩鏉跨數鑴戙€佹姇褰变华绛夐兘鍙互鍐嶇幇涓嶅悓鑼冨洿鐨勯鑹层€備负浜嗘爣鍑嗗寲杩欑鑹插樊锛屽凡浣跨敤鍚勭娴嬮噺棰滆壊鑼冨洿鐨勬柟娉曟潵鍒涘缓鍙紶杈剧殑棰滆壊鑼冨洿锛屼互渚夸簡瑙ｆ瘡涓澶囩殑鍔熻兘銆傝浜嗚В鑹插煙锛屾偍闇€瑕佷簡瑙ｉ鑹叉爣鍑嗐€傛煡浜嗗緢澶氭枃鐚紝鍙戠幇杩欎釜涓滆タ澶鏉傦紝澶毦鐞嗚В浜嗐€傝繖閲屾垜鍙畝鍗曡鏄庝竴涓嬨€?931骞达紝CIE锛堝浗闄呯収鏄庡鍛樹細锛夊缓绔嬩簡鏍囧噯瑙傚療鑰咃紝鎺ㄨ崘浣跨敤棰滆壊鍧愭爣xyz锛圕IEXYZ锛夈€傝繖浜涘潗鏍囪鐢ㄦ潵鏋勬垚鐜板湪鐨勬爣鍑嗗浘琛紝瀹冪敤鏁板鐞嗚鏉ヨ瀹氫汉绫昏瑙夌殑鑼冨洿鎴栭鑹层€傛鑹插害鍥剧殑璁捐浣垮緱Y鍙傛暟鏄鑹蹭寒搴︾殑搴﹂噺锛岃€岄鑹茬殑鑹插害鐢眡鍜寉鍙傛暟(Yxy)鏍囪瘑銆俢olor-gamutsrgb銆乸3銆乺ec2020杩欎笁涓彲鑳界殑鍙栧€煎彲浠ョ悊瑙ｄ负涓夌涓嶅悓鐨勮壊鍩熴€俿rgb锛歴RGB鏄暟瀛椾骇鍝併€乄indows鐜鍜屾樉绀哄櫒涓娇鐢ㄧ殑鏈€鏍囧噯鐨勮壊鍩熴€傝繖绉嶈壊鍩熺殑濂藉鏄湪绐勮寖鍥寸殑鍩虹涓婂噺灏戜簡杈撳叆杈撳嚭鐨勮壊宸€傝繖浜涢檺鍒朵娇棰滆壊鑳藉蹇€熷啀鐜帮紝杩欏氨鏄负浠€涔堝畠浠婂ぉ琚敤浣滄暟瀛椾骇鍝併€佹樉绀哄櫒鍜屼簰鑱旂綉鐨勬爣鍑嗐€侾3锛欴CI-P3鑹插僵绌洪棿鏄疭MPTE锛堢編鍥界數褰辩數瑙嗗伐绋嬪笀鍗忎細锛夋帹鍑虹殑RGB鑹插僵绌洪棿銆傝壊褰╃┖闂寸殑鑹插煙姣攕RGB瀹?6%锛屽父鐢ㄤ簬鏁板瓧鐢靛奖銆傛墍鏈夋暟瀛楃數褰辨斁鏄犳満閮借兘澶熷畬鍏ㄦ樉绀篋CI-P3鑹插僵绌洪棿銆傚皢DCI-P3涓?K鏄剧ず鍣ㄧ浉缁撳悎锛屽彲涓哄獟浣撲笓涓氫汉澹彁渚涙瀬鑷寸殑鑹插僵绮惧害鍜屽噯纭害銆侾3鑹插煙澶т簬骞跺寘鎷瑂rgb鑹插煙銆俽ec2020锛氭洿鏂版洿澶х殑鑹插煙锛宺ec2020鑹插煙澶т簬骞跺寘鍚玴3鑹插煙銆備笅鍥句腑杩樻湁鏇村涓嶅悓鐨勮壊鍩熴€傜敤杩欏紶鍥惧ぇ鑷磋ˉ涓€涓嬩粈涔堟槸鑹插煙锛氫负浠€涔堣閭ｄ箞澶氳壊鍩燂紝瀹冧滑鐨勫尯鍒湪鍝噷锛熸瘡涓鑹叉爣鍑嗛兘鏄负浜嗘弧瓒崇壒瀹氶渶姹傝€屽垱寤虹殑锛屽苟鎺ㄥ姩鎶€鏈彂灞曚互娑电洊鏇村箍娉涚殑棰滆壊鑼冨洿銆備竴鏂归潰锛岃壊褰╂爣鍑嗚涓撲笟浜哄＋灏嗕粬浠殑鎯虫硶鍙樹负鐜板疄锛屽彟涓€鏂归潰锛屽叕浼椾篃鑳戒韩鍙楀埌涓€娴佸搧璐ㄧ殑鑹插僵鍜岃瑙夊ū涔愩€傜畝鍗曟潵璇达紝鏍囧噯鏄剧ず鍣ㄧ殑鑹插煙閫傚悎鏃ュ父浣跨敤锛屼絾涓嶈冻浠ラ噸鐜颁笓涓氬搧璐ㄧ殑鍥惧儚銆傛洿楂樼殑鑹插煙鎰忓懗鐫€鏇撮€肩湡鐨勬紨鑹叉€у拰鏇村井濡欑殑娓愬彉銆傝繖瀵艰嚧鏇村姞閱掆€嬧€嬬洰鍜岄€肩湡鐨勮壊璋冨啀鐜板拰鏇村钩婊戠殑鐏板害绾с€傝壊鍩熺殑瀹為檯鍦烘櫙锛熷ソ鍚э紝杩欏彲鑳藉氨鏄畠濡傛涓嶅彈娆㈣繋鐨勫師鍥犮€傚叾瀹炲畠鐨勫吋瀹规€ц繕涓嶉敊锛氶櫎浜嗗棰滆壊瑕佹眰鍙樻€佸埌鏋佽嚧鐨勫満鏅锛岃繖涓獟浣撴煡璇㈠姛鑳藉疄鍦ㄦ槸澶急浜嗐€傛垜璁や负瀹冨湪鍥藉唴鐜涓病鏈変换浣曞簲鐢ㄣ€傚湡澹ゃ€傛瘡涓汉閮藉彲浠ョ悊瑙ｅ拰鐞嗚В銆俢olor-contrast()棰滆壊瀵规瘮閫夋嫨铏界劧color-contrast()鎺掑湪鍊掓暟绗笁浣嶏紝浣嗗嵈鏄竴涓潪甯稿ソ鐢ㄧ殑棰滆壊鍑芥暟銆備箣鎵€浠ュ姝や笉鍙楁杩庯紝鏄洜涓哄畠杩樻病鏈夊緱鍒颁换浣曟祻瑙堝櫒鐨勬敮鎸侊細褰撶劧锛岃繖骞朵笉濡ㄧ鎴戜滑鎻愬墠鐭ラ亾銆俢olor-contrast()鏄湪CSSColorModuleLevel5瑙勮寖涓紩鍏ョ殑銆傚畠鐨勮娉曞緢濂囨€細color-contrast(vs#{2,}[to[|AA|AA-large|AAA|AAA-large]]?)鍏朵腑锛氱涓€閮ㄥ垎鍙互鏄换鎰忛鑹插€硷紝蹇呴』鏄浜岄儴鍒?color>#{2,}鏄€楀彿鍒嗛殧鐨勯鑹插€煎垪琛紝鐢ㄤ簬涓庣涓€涓€艰繘琛屾瘮杈冿紝蹇呴』鏄涓夐儴鍒哰to[|AA|AA-澶AAAA绾AAA-澶]锛?,鍚庨潰鍙互璁剧疆涓€涓€硷紝鎴栬€匴CAG瑙勮寖鐨剆trength锛屽彲閫夊€糀A琛ㄧず鍊?.5锛孉A-large琛ㄧず鍊?AAA琛ㄧず鍊?AAA-large琛ㄧず鍊?.5锛屽疄闄呯敤娉曞涓嬶細{棰滆壊锛氶鑹插姣旓紙#ffcc00vs#bbccdd锛?0c0c0c锛?d2691e锛夛紱//鎴栭鑹诧細棰滆壊瀵规瘮锛?ffcc00vs#bbccdd,#0c0c0c,#d2691eto4.5锛?//鎴朿olor:color-contrast(#ffcc00vs#bbccdd,#0c0c0c,#d2691etoAA);}鍩轰簬鍙闂€э紝鐞嗚Вcolor-contrast()闇€瑕佷竴浜涘墠缃煡璇嗘潵鐞嗚В杩欎釜灞炴€х殑鍏蜂綋鍔熻兘銆傞鍏堬紝浣犻渶瑕佺煡閬撲粈涔堟槸棰滆壊瀵规瘮銆傝繖鍦ㄦ垜鐨勬枃绔犫€斺€斿墠绔壇濂藉疄璺电殑涓嶅畬鍏ㄦ寚鍗椾腑涔熸湁鎻愬埌浠€涔堟槸棰滆壊瀵规瘮浣犳湁娌℃湁鍏冲績杩囬〉闈㈠唴瀹圭殑灞曠ず锛屼娇鐢ㄧ殑棰滆壊鏄惁鍚堥€傦紵鑹茬洸鍜岃壊鐩茬敤鎴疯兘鍚︽甯哥湅鍒板唴瀹癸紵鍠勭敤鑹插僵鍦ㄤ换浣曟椂鍊欓兘鏄湁鐩婄殑锛岃€屼笉浠呴檺浜庤壊寮便€佽壊鐩茬殑鐢ㄦ埛銆傚湪鎴峰浣跨敤鎵嬫満鏃讹紝鍦ㄥ己鐑堢殑闃冲厜涓嬪緢闅剧湅娓咃紝浣嗙鍚堟棤闅滅鏍囧噯鐨勯珮娓呫€侀珮瀵规瘮搴︾殑鏂囧瓧鏇存槗闃呰銆傝繖閲屾湁涓€涓蹇碘€斺€旇壊褰╁姣斻€傜畝鍗曠殑璇达紝鎻忚堪鐨勬槸涓ょ棰滆壊涔嬮棿浜害锛圔rightness锛夌殑宸紓銆傚綋搴旂敤鍒版垜浠殑椤甸潰涓椂锛屽ぇ澶氭暟鎯呭喌鏄儗鏅鑹诧紙background-color锛夊拰鍐呭棰滆壊锛坈olor锛変箣闂寸殑瀵规瘮銆傚€熺敤涓€寮犲浘鈥斺€旂煡涔庘€斺€旀帹鑽愮殑15娆綰I璁捐宸ュ叿锛屽姪浣犺交鏉炬棤闅滅锛氭樉鐒讹紝鍦ㄤ笂闈㈡渶鍚庝竴涓緥瀛愪腑锛屾枃瀛楀凡缁忓緢涓嶆竻鏅颁簡锛屾櫘閫氱敤鎴峰緢闅剧湅娓呮銆傝繕鏈変粈涔堟槸WCAG瑙勮寖鐨勫墠缃煡璇嗭紝浜嗚ВWCAG瑙勮寖銆傚湪鏃犻殰纰嶏紙涔熷彨鏃犻殰纰嶈璁★紝Accessbility锛孉11y锛変腑锛屾湁鏈€鏉冨▉鐨勪簰鑱旂綉鏃犻殰纰嶈鑼冣€斺€擶CAG锛屽畠鍒跺畾浜嗕簰鑱旂綉鏃犻殰纰嶇殑鍚勪釜鏂归潰銆傚叾涓紝AA绾ц鑼冭瀹氾紝鎵€鏈夐噸瑕佸唴瀹圭殑鑹插僵瀵规瘮搴﹂渶瑕佽揪鍒?.5:1鎴栦互涓婏紙瀛楀彿澶т簬18鏃朵负3:1鎴栦互涓婏級锛屾墠鑳藉叿鏈夎壇濂界殑鍙鎬с€傚湪AAA绾ф爣鍑嗕笅锛屾墍鏈夐噸瑕佸唴瀹圭殑鑹插僵瀵规瘮搴﹂渶瑕佽揪鍒?:1鎴栦互涓婏紙澶т簬18瀛楀彿鏃朵负4.5:1鎴栦互涓婏級锛屾墠鑳藉叿鏈夎壇濂界殑鍙鎬с€傝繖灏辨槸涓婇潰鎻愬埌鐨凙A銆丄A-large銆丄AA銆丄AA-large鍏抽敭瀛楃殑鐢ㄦ涔嬪湴銆備娇鐢╟olor-contrast()浜嗚В浜嗕笂闈㈢殑鍓嶇疆鐭ヨ瘑鍚庯紝灏卞緢瀹规槗鐞嗚Вcolor-contrast()鐨勪綔鐢ㄤ簡銆備緥濡傦細{鑳屾櫙棰滆壊锛?fff;color:color-contrast(#fffvs#000,#666,#ddd);}杩欓噷鑳屾櫙鑹蹭负鐧借壊#fff锛岄渶瑕侀€氳繃color-contrast(#fffvs#000,#666,#ddd),渚濇姣旇緝#fff鍜?000,#666,#ddd,杩?绉嶉鑹插拰鐧借壊鐨勫姣斿害鍒嗗埆涓?1,5.74,1.35,21鐨勫姣斿害鏈€澶?鏄剧ず鏈€娓呮櫚,鎵€浠ユ渶缁堥鑹叉槸#000銆傜ず鎰忓浘濡備笅锛氬鏋滃簲鐢╰o鍏抽敭瀛楋細{background-color:#fff;color:color-contrast(#fffvs#000,#666,#dddto4.5);}锛岄偅涔坈ontrast鐨勬渶澶ч鑹插€煎氨涓嶇敤浜嗭紝鐩存帴閫夋嫨contrast瓒呰繃4.5鐨勭涓€涓€煎氨澶熶簡锛岃繖閲岀殑棰滆壊鐨勬渶缁堣绠楀€间负#666锛屽洜涓?.74澶т簬4.5銆傜患涓婃墍杩帮紝color-contrast()鐨勫嚭鐜板緢濂藉湴鍙嶆槧浜嗗綋浠奀SS鍙戝睍鐨勪竴涓ぇ鏂瑰悜锛屾洿鍔犳敞閲嶇敤鎴蜂綋楠屽拰浜掕仈缃戠殑鏃犻殰纰嶈璁★紝杩欎竴鐐瑰湪鍥藉唴涔熷緢瀹规槗琚獸E蹇界暐銆侫ccessibility鏄垜浠綉绔欓潪甯搁噸瑕佺殑涓€涓儴鍒嗭紝浣嗘槸澶ч儴鍒嗗墠绔紙鍏跺疄搴旇鏄痙esign,front-end,product锛夌殑鍚屽閮戒細蹇界暐瀹冦€備簨瀹炰笂锛岄渶瑕佹棤闅滅璁捐鐨勪笉浠呬粎鏄畫鐤句汉銆傛垜浠粡甯镐細閬囧埌鏃犻殰纰嶅満鏅細璁颁綇锛屾棤闅滅璁捐瀵瑰ぇ瀹舵洿鍙嬪ソ銆傚叧娉ㄥ彲璁块棶鎬у苟寮€濮嬭€冭檻鍙闂€ц璁°€傛渶鍚庯紝鏈枃浠嬬粛浜?021骞碈SS浣跨敤鐜扮姸涓渶鍐烽棬鐨勪袱涓壒鎬э紝鍓嶈€呬笉濂借瘎浠凤紝浣嗗悗鑰呭湪鏈潵杩樻槸鏈変竴瀹氫綔鐢ㄧ殑銆傚埌姝ょ粨鏉燂紝甯屾湜杩欑瘒鏂囩珷瀵逛綘鏈夋墍甯姪锛氾級濡傛灉浣犳兂鑾峰彇鏈€鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂颁腑锛屾杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
