Skip to content

개발자 매뉴얼 | 색약 모드

Jump to bottom
Yeonji-Lim edited this page Aug 9, 2022 · 5 revisions

색약 모드(백엔드)

services/manageStyleSheet.js에서 사용할 변수(strict_mode, setting)를 설정하고,

원본 html은 모든 색상을 색각이상자가 인식가능한 색상으로 변경합니다.

원본 html을 변환하는 방식은 다음과 같습니다.

  1. 원본 html에서 색상 hex코드를 모두 추출합니다.
  2. 해당 색상을 그에 대응하는 색각 이상자가 인식가능한 색상으로 대체합니다.
    • 색각 이상자 색상표에서 원본 색상과 가장 비슷한 색상을 선택합니다.
    • 해당 색상을 원본 색상의 명도와 동일하게 변환합니다.
/***** services/colorWeakness.js *****/

// 색각 이상자 색상표를 사용해 원본 색상을 변환
const weak_color = require('./getWeakColor');

// !important를 명시하는 요소 미사용
const strict_mode = false;

// 구체적인 기본 색상 설정
// manageStyleSheet.js의 makeStyle에서 제공하는 스타일 시트는 색각 이상자가 인식가능한 색상으로 구성된 스타일 시트임
const setting = {};

// 색각 이상자가 인식가능한 색상으로만 구성된 html로 변환
const getRenderedHtml = (html_data) => {
    const pattern = /#[\da-f]{6}/gi;
    if(pattern.test(html_data)) {
        const target_list = [...new Set(html_data.match(pattern))];
        for(const target of target_list) {
            html_data = html_data.replace(new RegExp(target, 'gi'), weak_color.getColor(target));
        }
    }
    return html_data;
}

색상 변경은 services/getWeakColor.js를 통해 이루어집니다.

색각 이상자가 인식가능한 색상 표는 널리 - 색각이상자를 위한 웹 접근성 가이드라인을 참고 하였습니다.

/***** services/getWeakColor.js *****/
// RGB, HEX, HSL 변경 모듈
const convert = require('color-convert');

// 색각 이상자가 인식 가능한 색상 표
const ColorTable = {
    BLACK: [0, 0, 0],
    GRAY: [128, 128, 128],
    WHITE: [255, 255, 255],
    ORANGE: [230, 159, 0], // #e69f00
    BLUE: [0, 114, 177], // #0072b1
    SKYBLUE: [86, 180, 232], // #56b4e8
    GREEN: [0, 159, 115], // #009f73
    YELLOW: [240, 229, 66], // #f0e542
    VERMILION: [213, 95, 0], // #d55f00
    PURPLE: [213, 95, 0] // #cd78a8
};

// 원본 색상을 색각 이상자가 인식 가능한 색상으로 변환
const getColor = (targetColor) => { ... }

// 두 색상의 RGB 값의 거리 계산
const getDistanceOfVector = (v1, v2) => { ... }

색약모드(프론트)

// app.js의 requestAPI함수를 props.e 함수로 호출
// 각각의 api 요청 정보를 props로 내려받고 이벤트 발생과 함께 매개변수로 올려줌
    const toggles = props.list.map((el, idx)=>{
        const toggle_e = (e)=>{
            if(e.target.ariaPressed){
                const search = new URL(window.location).searchParams.get('search');
                props.e(el.api, search);
            }   
        }
        return <ToggleButton 
            key={idx}
            value={el.label}
            onClick={toggle_e}
            style={{"fontWeight":"bold"}}
            >
                {el.label}
            </ToggleButton>
    })

색약모드에서 올려주는 api 정보들은 다음과 같습니다.

color_weakness: ['color', 'color_weakness']
Clone this wiki locally