?? ???? ? ???? ??? ??? ???, ???? ?? ??? ????? ? ????. ??? ??? ???? ??? ? ? ??? ??? ??? ?? (WCAG)?? ?? ? ?? ??? ?? ??? ?? ??? ??? ?? ?????. ??? ?? ?? ???? ? ??? (Figma?? ?? ??? ??? ????), ???? ?? ?? () ??? ?? ??? ?? ?? ??? ?? ? ?? ???? ??? ????? (??? ??? ?? ?? ???? ??).

???? ?? ???? ??? ?? ???? ?? ??????. ??? ???? ?? ?? () ?? ?? ?? ()??? ??? ?? ? ??? ??????. ??? 2021 ?? Safari Technology Preview 122??? ??????, ??? ?? ?? ?? (?? ?? 220).

??? ??? ????? :

 ?? {
  -?? ?? : Darkblue;
  ??? : var (-???);
  ?? : ?? ?? (var (-Packground-Color));
}

??? Contrast-Color ()? ??? ?? ??? Darkblue? ? ? ???? ??? ????? Contrast-Color ()? ???? ???? ?????. ?? ????? ???? ???? ?? ??? ?? ? ? ?? ??? ???? (?? ? ? ??? ?? ????? ????).

??? ??? ?? ()? ??? ? ????.

 @Supports (?? : Contrast-Color (???)) {
  / * ?? ?? () ?? */
}

@Supports not (?? : Contrast-Color (???)) {
  / * ?? ?? () ???? ?? */
}

?? ??? ?? ()

?? ??? ?? ???? ??? ?? ??????. ???? ?? ??? ?? ???? ??? ??? ???????.

?? ? ????, ? ??? ???? ??? ??? ????,… ??? ?? ?? ??? ?? ?? ? ??? ? ?? ?? ? ? ????.

??? ???? ???? ?? ? ?? ?? ????. ?? ??? ??? ??? ??? ??? ?? ? ? ?? ? ??????? ????. ?? ?? ()? ??? ? ??? ???? ?? ? ???? . ?????? ?? ?? () ? ???? ??? ?? ??? ?? ??? ???? ????? ???? ?????. ???? Contrast-Color ()? ??? ??? ? ????.

Contrast-Color ()? ? ?? ??? ??? ????? ??? ? ?? ??? ???? ???? ????. ??? ?? ????? (????? 2 ?? ?? ??/1 ?? ?? ?????? ?? ? ?? ?? ?? () ????)? ???? "??"? ??????.

<button>
  <span>??</span>
</button>

?? {
  ?? : ?? ???? (???, ???, ???);

  ?? {
    ?? : ?? ?? (???, ?? ?? (???), ?? (???));
    ?? : ??;
    ?? ?? : ???;
  }
}

??? ?? ??? ??? ??? ??? ??? ????? Contrast-Color ()? ?? ? ?? ???? ? ????? ?????? ??? ????? ???? 50% ??? ????. ? ??? ?? ?? ?? ()? ?? ? ?? ???? ?? ? ????.

??? ?? ??? ?????? ?? ?? ??? ?? ?? ??? ?? ??? ?? ???? ??? ?? ???? ??, ??? ??? ???, ?? ? ??? ??? ? ?? ?? ??? ??? ???? ???? ?? ????? ?????. ??? APCA? ?????.

APCA (?? ??? ?? ?? ????)? ?? ??? ????? ?????? ??? ???????. APCA? ??? ? Andrew Somers? ?? (?? ?? ??? ? ??? ??)? ????? WCAG 2“??”? 23%? ??? ?? ? ? ??? ?? ???????. ?? "??"? 47%? ?? ? ? ????.

APCA? ? ?? ??? ???? ??? ??? APCA ??? ?? (ARC)? ?? ? ?? ?? ??? ??? ???? ?? ??? ??? ???? (?? ?? ??? 600?? ?? ?????? ???? Hooray). ??? ???? ????? ?? ???? APCA ?? ???? ?? ?? ?? ????? ??? ????? ???? ??? ??? ?????.

Contrast-Color ()? APCA? ???? ??? ?? ??? ?? ? ?? ????? ???? ? ?? ??? . ? ??? APCA? WCAG ???? ??? ??? ? ??? ?? ??? ?????. ?? ?? ?? ??? ???? WCAG 2 ??? ???? ?? ??? ??? WCAG 3 ?? ?? (??? ? ?)? ?????? ?? ???????.

????. ??? APCA? WCAG 3? ????? ? ????. ??, ??? ??? (?? ??) ??? ??? ?? ?? ??, ? ?? ? ?? ???? ???, ????? ??? ?? ?? ??? ?? ? ?? ?. ?? Contrast-Color ()? WCAG 2 ? ???? ????.

?? ? () ??

??? Darkblue ?? ??? ??? ? (??? ?? ??)???. ? DarkBlue ??? CSS ??? ?? ? ? ?? ? ? ??? ????? ?? ? ?? ? ? ???? (??? ? ?).

 ?? {
  -?? ?? : Darkblue;
  ??? : var (-???);
  / * ???? ?? */
  ?? : ?? ?? (var (-Packground-Color));
}

??? ??? ???? Lightblue :

 ?? {
  -?? ?? : Lightblue;
  ??? : var (-???);
  / * ?? ??? ?? */
  ?? : ?? ?? (var (-Packground-Color));
}

??, ??? ??? ????? ???? ?? ??? ???? ??? ()? ??? ? ???? (?? ??? ????? ??) :

 ?? {
  -?? : Darkblue;
  ?? : var (-??);
  / * ???? ?? */
  ??? : ?? ?? (var (-??));
}

??? ????? (??, 16 ??, RGB, HSL, HWB ?) :

 ?? {
  / * HSL ??? */
  -?? ?? : HSL (0% 0%);
  ??? : var (-???);
  / * ???? ?? */
  ?? : ?? ?? (var (-Packground-Color));
}

???? ?? ??? ??????? (? : ??). ??:

 ?? {
  -?? ?? : HSL (0% 0%);
  ??? : var (-???);
  / *? ???? ???? ???? ?? ????? */
  ?? : ?? ?? (var (-Packground-Color));

  & : ?? {
    / * 50% ??? */
    -?? ?? : HSL (0% 50%);
  }
}

????? Light-Dark () ??? ?? Contrast-Color ()? ???? ?? ??? ???? ??? ??? ?? ??? ?? ? ? ????.

 : ?? {
  / * ?? ? ?? Dark Mode */
  & :
    ?? : ???;
  }

  / * ?? ?? ???? ??? */
  & : not (: hAD (?? [type = "checkbox": checked)) {
    ?? : ?;
  }

  ? {
    / * ? ???? ?? ?? */
    ?? : ??? ?? (HSL (0% 50%), HSL (0% 0%));
    / * ? ???? ?? ?? ?? */
    ?? : ???-??? (?? ? (HSL (0% 50%)), ?? ? (HSL (0% 0%));
  }
}

APCA? ???? ?? Light Mode? Dark Mode Contrast? ???? ???? ??, ?? WCAG ????? ?? ??? ?? ??? ????? ????? ????. ?? ???? ???? ??? ??? ?? ?? ?????? ??? ?? (font size, font weight ?)? ???? ?? ??? ?? ?? ?????? ??? ?? ?? () CSS ??? ??? ?????.

???? ?? ?? ()? "???"??? ???? ???? ??????? ??? ????. ?? Prefers-Contrast : More Media Query??? Contrast-Color ()? ??? ? ????.

 ?? {
  -?? ?? : HSL (270 100% 50%);
  ??? : var (-???);
  / * ?? ?? (WCAG AA : ??) */
  ?? : HSL (270 100% 90%);

  @Media (???? ?? : more) {
    / * ???? ????? (wcag aa : pass) */
    ?? : ?? ?? (var (-Packground-Color));
  }
}

?????, ?? ??? ? ???? ? ?? ?? ???? ?? ???? ????. ??? ?? ??? ?? ???? ??? ?? ???, ? ?? ??? ??? ???? ??? ??? ?? ???? ??? ?? ? ? ????. ??? ??? ??? ???? ???? ??? ??? ??? ??? ???? ??? ????.

?? ??

??? Contrast-Color ()? ?? ? ?? ???? ? ????? ?? ??? ???? ????. ??? ? ?? ????? ???? ????? ???? ?????. ? ?? ?? ??? ?? ??? ??? ??? ?? ?? (? : WCAG AA)?? ??????????, ???? ???????. ??? ??? ?? ??? ????? ?, ? ????? ?? ??, ?? ??, ?? ?? ???????.

? ?? ??? ???? Windows? ?? ?? ??? ?? ??? ?? ??? ????. ? ??? ? ????? ?? ?? ? ?? ??? ??? ???? ??? ?? ??? ??????. ???? ??? ?? ?????? (?? ?? ?? CSS ??? ???? ??? ? ??? ?? ?? ? ??? ??? ? ??? MacOS? ?? ??? ??? ???? ????.

???? ??? ? ????? ??? ? ?? ?? ??? ??? ??? ? ?? ??? ??? ?????? ????? (????? ? ?? ?????). ?? ??? ? ????. ?? ?? ???? ?? ????? ?? ??? ???? ??? ??? ??? ???? ???? ??? ??? ????. ? ???,? ???? ?? ??? ????? ?? ??? ??? ? ???? (???? ??? ??? ??). ??? ???? ??, CSS ????? ? ????. ????? ?? ?? ???? ??? ??? ? ???? ??? ??? ??? ? ????.

??? ?????? Contrast-Color ()? ??? ??????, ??? ??? ????? ??? ?? ?? ??? ?? ? ??????? ??? ???? ???? ?? ??? ??????

? ??? CSS Contrast-Color () ?? ??… ? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!