웹 접근성은 모든 사용자가 웹 콘텐츠 및 기능에 동등하게 접근할 수 있도록 보장하는 것입니다. 이는 시각 장애인, 색맹, 고령자 등 다양한 사용자를 고려해야 함을 의미합니다. 웹 페이지의 색상 대비는 접근성을 평가하는 중요한 요소 중 하나입니다. 이번 글에서는 자바스크립트를 사용하여 웹 접근성을 고려한 색상 대비를 검사하는 방법을 알아보겠습니다.

1. 색상 대비 비율 계산

색상 대비 비율은 두 색상 사이의 밝기를 기반으로 계산됩니다. 대비 비율은 1:1에서 21:1 사이의 값을 가질 수 있으며, 값이 높을수록 두 색상 사이의 대비가 높습니다. 웹 콘텐츠의 텍스트와 배경 색 사이의 대비는 최소한 4.5:1 이상을 가져야 웹 콘텐츠를 시각적으로 잘 볼 수 있는 접근성 수준을 충족합니다.

코드로 색상 대비 비율을 계산하는 자바스크립트 함수를 작성해보겠습니다.

function calculateContrastRatio(color1, color2) {
    // 각 색상의 밝기 계산
    var brightness1 = (color1.r * 299 + color1.g * 587 + color1.b * 114) / 1000;
    var brightness2 = (color2.r * 299 + color2.g * 587 + color2.b * 114) / 1000;

    // 색상 대비 비율 계산
    var contrastRatio = (brightness1 + 0.05) / (brightness2 + 0.05);

    return contrastRatio;
}

위의 함수는 calculateContrastRatio라는 이름의 함수를 정의합니다. 이 함수는 color1과 color2라는 두 개의 매개변수를 받아들입니다. 각 매개변수는 RGB 형식(예: {r: 255, g: 255, b: 255})으로 표현된 색상을 나타냅니다.

함수 내부에서는 입력된 두 색상의 밝기를 계산하고, 이를 기반으로 색상 대비 비율을 계산하여 반환합니다.

2. 색상 대비 검사

위에서 작성한 함수를 사용하여 웹 페이지의 색상 대비를 검사하는 방법은 다음과 같습니다.

// 텍스트와 배경 색상
var textColor = {r: 0, g: 0, b: 0}; // 검은색
var backgroundColor = {r: 255, g: 255, b: 255}; // 흰색

// 색상 대비 비율 계산
var contrastRatio = calculateContrastRatio(textColor, backgroundColor);

// 색상 대비 비율 출력
console.log("색상 대비 비율:", contrastRatio);

// 색상 대비 비율이 접근성 기준(4.5:1)을 충족하는지 확인
if (contrastRatio >= 4.5) {
    console.log("접근성 기준을 충족합니다.");
} else {
    console.log("접근성 기준을 충족하지 않습니다.");
}

위의 예시에서는 텍스트 색상을 검은색, 배경 색상을 흰색으로 설정하고 색상 대비 비율을 계산해봤습니다. 계산 결과를 출력한 뒤, 색상 대비 비율이 접근성 기준인 4.5:1을 충족하는지 확인하여 결과를 출력합니다.

3. 색상 대비 검사 도구

위에서 작성한 함수를 바탕으로 웹 페이지의 모든 텍스트와 배경 색상에 대한 색상 대비를 검사하는 자동화된 도구를 만들 수도 있습니다. 이를 통해 웹 접근성을 보다 효율적으로 관리할 수 있습니다.

참고로, 자바스크립트 외에도 다양한 도구들이 색상 대비 검사를 수행하는 기능을 제공하고 있으니 필요에 따라 그러한 도구들을 활용하는 것도 좋은 방법입니다.

이상으로 웹 접근성을 고려한 색상 대비 검사 방법에 대해 알아보았습니다.

#웹접근성 #색상대비