PowerApps의 캔버스 앱에 액세스 가능한 색Accessible colors for canvas apps in PowerApps

캔버스 앱에서 사용되는 색은 색맹 및 저시력 사용자가 액세스할 수 있어야 합니다.Colors used in a canvas app should be accessible to color-blind and low-vision users. 모든 PowerApps 테마는 기본적으로 액세스할 수 있습니다.All PowerApps themes are accessible by default. 앱에서 사용되는 색을 수정할 경우 다음 지침에 따라 색에 계속 액세스할 수 있는지 확인합니다.When modifying colors used in an app, follow these guidelines to ensure that they remain accessible. 색 대비 문제를 식별하는 데 도움이 되는 온라인으로 사용 가능한 여러 도구가 있습니다.There are several tools available online which can help you identify color contrast issues.

텍스트에 대한 최소 대비Minimum contrast for text

  • 텍스트 및 배경의 대비 비율은 4.5:1 이상이어야 합니다.Text and its background must have a contrast ratio of at least 4.5:1
  • 큰 텍스트의 대비 비율은 3:1 이상이어야 합니다.Large text must have a contrast ratio of at least 3:1
  • 비활성 텍스트에는 대비 요구 사항이 없습니다.Disabled text has no contrast requirements

실제로 모든 대화형 컨트롤에는 다음 사이에 적절한 색 대비가 있어야 합니다.In practical terms, all interactive controls must have adequate color contrast between:

텍스트 이외 항목에 대한 최소 대비Minimum contrast for non-text

참고

WCAG 2.0 표준에서 대비 요구 사항은 텍스트에만 적용됩니다.In the WCAG 2.0 standard, contrast requirements only applies to text. 접근성을 높이려면 아이콘 단추와 같은 필수 사용자 인터페이스 구성 요소에 대해 제공 예정인 WCAG 2.1 대비 지침을 고려하세요.For greater accessibility, consider the upcoming WCAG 2.1 contrast guidelines for essential user interface components like icon buttons. 이러한 구성 요소에는 최소 비율 3:1이 권장됩니다.A minimum ratio of 3:1 is recommended for these components. 이 섹션에서 설명하는 지침은 WCAG 2.0 준수에 있어 선택 사항입니다.The guidelines described in this section are optional for WCAG 2.0 compliance.

사용자 인터페이스 구성 요소User interface components

모든 대화형 컨트롤에는 다음 사이에 적절한 색 대비가 있어야 합니다.All interactive controls must have adequate color contrast between:

추가적인 색 대비 확인은 전체 영역이 대화형이거나 참조용인 컨트롤에 적용됩니다.Additional color contrast checks apply for controls where the entire area is interactive or informative. 예를 들어 단추 또는 단추로 사용되는 아이콘 이 있습니다.For example, a Button or an Icon used as a button. 이렇게 하면 컨트롤의 경계가 분명해지고 사용자가 클릭하거나 탭할 수 있는 위치를 알 수 있습니다.This ensures that the boundaries of the control are clear and users know where they can click or tap.

해당 컨트롤에 테두리가 있는 경우 다음 사이에 적절한 색 대비가 있어야 합니다.If there is a border for such controls, there should be adequate color contrast between:

테두리가 없는 경우 다음 사이에 적절한 색 대비가 있어야 합니다.If there is no border, there should be adequate color contrast between:

그래픽 개체Graphical objects

이미지가 중요한 정보를 전달하는 경우 대비 문제를 확인하는 것이 좋습니다.If an image conveys important information, consider checking it for contrast issues. 이는 다음과 같은 이미지를 표시할 수 있는 컨트롤에 적용됩니다: 오디오, 이미지, 마이크비디오.This applies to controls where an image can be shown: Audio, Image, Microphone, and Video.

비디오 콘텐츠의 경우 대비 문제를 확인하는 것이 좋습니다.For video content, consider checking it for contrast issues. 또는 비디오를 설명하는 선택 자막을 추가할 수도 있습니다.Alternatively or additionally, provide closed captions that describe the video.

다른 시각 신호 제공Provide other visual cues

앱이 색으로만 정보를 전달하지 않는지 확인합니다.Ensure that the app does not convey information with just color. 예를 들어 적록 색맹이 있는 사용자는 녹색 성공 메시지에서 빨간색 오류 메시지를 구분할 수 없습니다.For example, users with red-green color blindness will not be able to distinguish a red error message from a green success message.

아이콘 같은 추가적인 신호나 기울임꼴밑줄 같은 텍스트 스타일이 의미를 전달하는 데 도움이 될 수 있습니다.Additional cues like an Icon or text styles like Italic and Underline can help convey meaning.

다음 단계Next steps

PowerApps 컨트롤에서 접근성 속성에 대해 알아보고 접근성 검사기를 사용해 보세요.Learn about accessibility properties in PowerApps controls and try using the Accessibility checker.