High-contrast themefoundation

High-contrast neutral theme that keeps every text pair above 7:1 and every border above 3:1.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/theme-contrast

고대비 무채색 테마입니다. 저시력 사용자나 밝은 야외 화면처럼 대비가 더 필요한 곳에서 글자, 경계, 강조색을 모두 더 진하게 만듭니다. 글자와 바탕 조합은 7:1 이상(WCAG AAA)입니다.

설치

pnpm dlx shadcn@4.23.0 add @uikit/theme-contrast

설치하면 globals.css 의 :root 와 .dark 에 아래 토큰이 덮어써집니다. 앱 전체가 이 테마가 됩니다. 사용자가 고르게 하려면 theming 의 data-theme 방식을 씁니다.

사용

tsx

import type { ReactNode } from "react";
export function HighContrastShell({ children }: { children: ReactNode }) {  return <div data-theme="contrast">{children}</div>;}

data-theme="contrast" 는 uikit 이 생성한 스타일시트(styles/uikit.css)를 쓰는 앱에서 동작합니다. 어두운 테마는 조상에 .dark 클래스를 두면 됩니다.

속성

밝은 테마(:root)와 어두운 테마(.dark) 둘 다 아래 토큰을 덮어씁니다. 값은 item.json 이 정본입니다.

토큰	쓰임
`foreground`, `muted-foreground`	본문 글자와 보조 글자
`border`, `input`	경계선과 입력 테두리
`primary`, `primary-foreground`	주요 버튼과 그 위의 글자
`ring`	포커스 링
`sidebar-primary`, `sidebar-primary-foreground`, `sidebar-ring`	사이드바의 강조와 포커스 링
`accent`, `accent-foreground`	메뉴 항목의 호버·포커스 바탕과 그 위의 글자
`chart-1` … `chart-5`	차트 계열 색. 색상을 돌려 구분합니다

기본으로 지키는 것

본문·보조 글자, primary, accent, 사이드바 조합은 밝은·어두운 테마 모두 7:1 이상입니다. 보조 글자가 흐려 읽히지 않는 일을 막습니다.
border 와 input 은 바탕과 3:1 이상입니다. 입력 칸과 구분선이 바탕에 묻히지 않습니다.
primary, ring, chart-1 … chart-5 는 바탕과 3:1 이상 차이가 납니다.

접근성

대비는 @plott/webkit-design/color 로 계산해 테스트가 지킵니다. 어두운 테마는 neutral 의 어두운 바탕 위에서 잽니다.
의미 색(info·success·warning·destructive)은 style 아이템 값 그대로이며 4.5:1 이상입니다. 7:1 은 neutral 조합과 강조색에만 적용됩니다.

의존

@uikit/style(neutral 바탕 토큰과 의미 색). 다른 패키지는 없습니다.