apcacontrast.comAPCA Contrast Calculator

APC A C ontrast Calculator TEXT / ICON COLOR SAMPLE⇦ Click To Swap ⇨ BACKGROUND COLOR Click Click CONTRAST All font sizes are in CSS px • Reference font shown with colors at actual sizeweight USAGE 200 300 Light 400 Normal 500 600 700 Bold Create a shareable URL of these colors Generate a URL of This Color Pair Accessible Contrast Relative to Font Size and Weight APCA reports lightness contrast as an Lc value from Lc 0 to Lc 106 for dark text on a light background, and Lc 0 to Lc -108 for light text on a dark background (dark mode). The minus sign merely indicates negative contrast, which means light text on a dark background. For resources, articles, and documentation, please visit our page at GitHub. × Please Enter Valid Colors First! QUICK START for using this tool. INPUT BOXES: You can enter a CSS color name or a 3 to 6 character hex value with or without a #, or as rgb() using numbers or percentages, with or without the 'rgb' and parenthesis. There is also a special shortcut for grey: enter only 1-3 rgb digits followed by a comma or percent symbol, or two hex digits (no comma) and they will be expanded. for instance, #fa becomes #fafafa. POLARITY: The APCA is polarity aware, this means that it recognizes the difference of dark text on a light background vs light text on a dark background. Therefore it is important to enter the text/icon color or background color in the correct input. SWAP COLORS: You can easily swap the text and background color by clicking the big ampersand () in the middle. ALPHA: The text color can have an alpha, which will be blended with the background before calculating contrast. NOTE: if you swap the text and background colors, the text color will be blended and the alpha set to 1 before swapping to the background. The hex and rgb() displayed over the input box always shows the final blended color. URL: You can create a URL of the colors to share. Any alpha is blended before creating the URL. COLOR SLIDERS: These are presently using HSL, which is not perceptually uniform. We are working on incorporating perceptually uniform sliders soon. BROWSER PICKER: The browser's default picker is available by clicking on the example color square next to the input boxes. APCA Guidelines: Bronze Level CONFORMANCE: BRONZE LEVELS (preliminary) These general levels are appropriate for use without reference to the lookup table (Bronze level conformance). For Silver level conformance, see the lookup table which improves accuracy and allows for greater flexibility. Lc 90 • Preferred level for fluent text and columns of body text with a font no smaller than 18px/weight 300 or 14px/weight 400 (normal), or non-body text with a font no smaller than 12px. Also a recommended minimum for extremely thin fonts with a minimum of 24px at weight 200. Lc 90 is a suggested maximum for very large and bold fonts (greater than 36px bold), and large areas of color. Lc 75 • The minimum level for columns of body text with a font no smaller than 24px/300 weight, 18px/400, 16px/500 and 14px/700. This level may be used with non-body text with a font no smaller than 15px/400. Also, Lc 75 should be considered a minimum for larger for any larger text where readability is important. Lc 60 • The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read. The minimums: no smaller than 48px/200, 36px/300, 24px normal weight (400), 21px/500, 18px/600, 16px/700 (bold). These values based on the reference font Helvetica. To use these sizes as body text, add Lc 15 to the minimum contrast. Lc 45 • The minimum for larger, heavier text (36px normal weight or 24px bold) such as headlines, and large text that should be fluently readabile but is not body text. This is also the minimum for pictograms with fine details, or smaller outline icons, , no less than 4px in its smallest dimension. Lc 30 • The absolute minimum for any text not listed above, which means non-content text considered as "spot readable". This includes placeholder text and disabled element text, and some non-content like a copyright bug. This is also the minimum for large/solid semanticunderstandable non-text elements such as "mostly solid" icons or pictograms, no less than 10px in its smallest dimension. Lc 15 • The absolute minimum for any non-text that needs to be discernible and differentiable, but does not apply to semantic non-text such as icons, and is no less than 15px in its smallest dimention. This may include dividers, and in some cases large buttons or thick focus visible outlines, but does not include fine details which have a higher minimum. Designers should treat anything below this level as invisible , as it will not be visible for many users. This minimum level should be avoided for any items important to the use, understanding, or interaction of the site. These define the basic minimum levels, what you might think of as A/AA as in the old WCAG 2. For the equivelent to AAA, simply increase the contrast values by Lc 15. APCA Font Table: Silver Level CONFORMANCE: SILVER LOOKUP TABLE (prelim) The table below is current as of May 28, 2022. Cross index reference font size (in CSS px) to CSS weight. Reference fonts for comparison include Barlow, Helvetica Neue, Helvetica, Fira Sans, Kanit, and Arial. APCA Contrast L c value must meet or exceed the value listed, however, values may be interpolated between the two closest values. For light text on a dark background the APCA tool will show a negative L c value. Simply use the absolute (positive) value. For example, if the APCA value is L c -58 , use L c 58. A ⊘ indicates that a larger font size (or heavier font weight) must be used. Cells marked with may be used for body text. The the body text cells outlined in yellow, add lc 15. APCA FONT TO CONTRAST TABLE Sorted by Font Size Beta 0.1.7 (G) • Revised May 27, 2022 Reference Font Weight Font Size 100 200 300 400 Normal 500 600 700 Bold 800 900 pt px APCA Contrast Value (L c ) 9 12 ⊘ ⊘ ⊘ ®© ®© ®© ®© ⊘ ⊘ 10.5 14 ⊘ ⊘ ®© 100 100 90 75 ⊘ ⊘ 11.25 15 ⊘ ⊘ ®© 100 90 75 70 ⊘ ⊘ 12 16 ⊘ ⊘ ®© 90 75 70 60 60 ⊘ 13.5 18 ⊘ ®© 100 75 70 60 55 55 55 15.75 21 ⊘ ®© 90 70 60 55 50 50 50 18 24 ⊘ ®© 75 60 55 50 45 45 45 21 28 ⊘ 100 70 55 50 45 43 43 43 24 32 ⊘ 90 65 50 45 43 40 40 40 27 36 ⊘ 75 60 45 43 40 38 38 38 31.5 42 100 70 55 43 40 38 35 35 35 36 48 90 60 50 40 38 35 33 33 33 45 60 75 55 45 38 35 33 30 30 30 54 72 60 50 40 35 33 30 30 30 30 72 96 50 45 35 33 30 30 30 30 30 Copyright © 2022 by Myndex Research. All Right Reserved. The vertical line between weights 500 and 600 indicates the point that a user agent switches from "normal" to "bold" if the intermediate weights are not available. APCA Contrast Legend ⊘ — Prohibited Except for Decorative Purposes Under Lc 30 is for non-text only. ©§™ — Placeholder/Disabled/Copyright ONLY × — Do Not Use for Body Text (Blocks or Columns)Weight 100 Fonts Should be Avoided To use as Block/Body Text, ADD Lc 15 Block/Body Text Zone—okay minimum values APCA Lc 90 — "Similar" to ISO 10∶1 APCA Lc 75 — "Similar" to WCAG 7∶1 APCA Lc 60 — "Similar" to WCAG 4.5∶1 APCA Lc 45 — "Similar" to WCAG 3∶130 — Minimum Contrast for Any Text Copyright © 2022 by Myndex Research. All Right Reserved. APCA CONTRAST TO FONT TABLE Sorted by Contrast Lc Value Beta 0.1.7 (G) • Revised May 27, 2022 Reference Font Weight Contrast 100 200 300 400 Normal 500 600 700 Bold 800 900 Lc Value Font Size in CSS px Lc 100 42 26.5 18.5 15 14.5 13.5 13 16 18 Lc 95 45 28 19.5 15.5 15 14 13.5 16 18 Lc 90 48 32 21 16 15.5 14.5 14 16 18 Lc 85 52 34.5 22 16.5 15.6 14.6 14 16 18 Lc 80 56 38.3 23 17.3 15.8 14.8 14 16 18 Lc 75 60 42 24 18 16 15 14 16 18 Lc 70 64 44 28 19.5 18 16 14.5 16 18 Lc 65 68 46 32 21.7 19 17 15 16 18 Lc 60 72 48 42 24 21 18 16 16 18 Lc 55 80 60 48 28 24 21 18 18 18 Lc 50 96 72 60 32 28 24 21 21 21 Lc 45 108 96 72 42 32 28 24 24 24 Lc 40 120 108 96 60 48 42 32 32 32 Lc 35 NT 120 108 96 72 60 48...