Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@drjoschua
drjoschua committed Oct 6, 2023
1 parent 7d9c0b2 commit e6e4df9
Show file tree
Hide file tree
Showing 10 changed files with 192 additions and 78 deletions.
12 changes: 6 additions & 6 deletions asset-manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
{
"files": {
"main.css": "/ccc21/static/css/main.bbe9a6c2.css",
"main.js": "/ccc21/static/js/main.3fdf7677.js",
"main.css": "/ccc21/static/css/main.beb81b01.css",
"main.js": "/ccc21/static/js/main.76f9502e.js",
"static/js/787.21b752af.chunk.js": "/ccc21/static/js/787.21b752af.chunk.js",
"index.html": "/ccc21/index.html",
"static/media/getFetch.cjs": "/ccc21/static/media/getFetch.c780682470504fffbd04.cjs",
"main.bbe9a6c2.css.map": "/ccc21/static/css/main.bbe9a6c2.css.map",
"main.3fdf7677.js.map": "/ccc21/static/js/main.3fdf7677.js.map",
"main.beb81b01.css.map": "/ccc21/static/css/main.beb81b01.css.map",
"main.76f9502e.js.map": "/ccc21/static/js/main.76f9502e.js.map",
"787.21b752af.chunk.js.map": "/ccc21/static/js/787.21b752af.chunk.js.map"
},
"entrypoints": [
"static/css/main.bbe9a6c2.css",
"static/js/main.3fdf7677.js"
"static/css/main.beb81b01.css",
"static/js/main.76f9502e.js"
]
}
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="nb"><head><meta charset="utf-8"/><link rel="icon" href="/ccc21/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/ccc21/logo192.png"/><link rel="manifest" href="/ccc21/manifest.json"/><title>Color Contrast Checker and Designer for WCAG 2.1 (CCC2.1)</title><script defer="defer" src="/ccc21/static/js/main.3fdf7677.js"></script><link href="/ccc21/static/css/main.bbe9a6c2.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
<!doctype html><html lang="nb"><head><meta charset="utf-8"/><link rel="icon" href="/ccc21/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/ccc21/logo192.png"/><link rel="manifest" href="/ccc21/manifest.json"/><title>Multi-Color Contrast Checker</title><script defer="defer" src="/ccc21/static/js/main.76f9502e.js"></script><link href="/ccc21/static/css/main.beb81b01.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
135 changes: 116 additions & 19 deletions locales/en/translation.json
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,118 @@
{
"about-section-title" : "Color contrast checker & designer 2.1",
"title" : "contrast match 2.1",
"footer-text": "Contact: email@email.no",
"input-delete" : "remove color",
"contrast-summary-heading": "combinations",
"contrast-summary-aaa": "Best level for text (AAA)",
"contrast-summary-aa" : "Good level for text (AA)",
"contrast-summary-nontext-aa" : "Godt level for non-text (AA)",
"contrast-summary-low" : "Low contrast level",
"table-switch" : "Swap view: ",
"traffic-lights" : "traffic light",
"view-chosen-colors" : "view colors",
"mockup-title" : "Here are the colors",
"mockup-text-small" : "See how you color choises affect readability and design! ",
"mockup-form-title" : "Questionnaire",
"mockup-form-statement1" : "I am cool",
"mockup-form-statement2" : "I am kind",
"mockup-footer-text" : "I am a footer text",
"add-color" : "add color"
"name-full" : "Multi-Color Contrast Checker",
"name-short" : "M3C",
"about-summary" : "This is a tool designed to enhance accessibility and readability of visual information on websites and in ICT applications. The tool will help you select palettes (color combinations) with good contrasts between the colors, based on the Web Content Accessibility Guidelines, WCAG.",
"about-description" : "The tool calculates color contrasts, finds matching WCAG levels, suggests good contrasts, and also provides an area for testing the palette in practice with commonly used examples in digital user interfaces.",
"structure-title": "Structure",
"structure": "The most important area is 'Your palette', which contains your color choices. The other functions are distributed under these tabs:",
"about-contributors-title" : "Contributors and Support",
"about-contributors" : "The following have contributed to the development of the tool",
"contributor-1": "drjoschua",
"contributor-link-1": "https://github.com/drjoschua",
"contributor-2": "thorkr",
"contributor-link-2": "https://github.com/thorkr",
"contributor-3": "untill",
"contributor-link-3": "https://github.com/untill",
"contributor-4": "kamillamortensen",
"contributor-link-4": "https://github.com/kamillamortensen",
"about-code-1" : "The code for the tool is available on ",
"about-code-link" : "Github",
"about-code-2" : " with an open source license and can thus be downloaded and used freely.",
"about-funding-1" : "The tool was developed by the research foundation ",
"about-funding-link-1" : "Norwegian Computing Center",
"about-funding-2" : " with grant funds from ",
"about-funding-link-2": "The Norwegian Directorate for Children, Youth and Family Affairs",
"about-funding-3": " (Bufdir) in Norway.",
"about-feedback-title" : "Feedback",
"about-feedback-1" : "We appreciate your feedback, especially praise, but also if there are things you are less satisfied with or if you have suggestions for improvement. You can send an e-mail to joschua@nr.no. Likewise, you can report the matter as a 'new issue' on ",
"about-feedback-link" : "Github",
"about-feedback-2" : ". Thank you very much!",
"about-wcag" : "The Web Content Accessibility Guidelines, known as WCAG in English, are technical guidelines focusing on accessibility and usability of websites.",
"about-wcag-versions-1": "There are several versions of WCAG, including",
"wcag-20": "version 2.0",
"wcag-20-link": "https://www.w3.org/Translations/WCAG20-no/",
"wcag-21": "version 2.1",
"wcag-21-link": "https://www.w3.org/Translations/WCAG21-no/",
"wcag-22": "version 2.2",
"wcag-22-link": "https://www.w3.org/TR/WCAG22/",
"wcag-22-1": "and",
"about-button-linking-to-wcag" : "Read about colors in WCAG 2.1",
"about-button-linking-to-wcag-ext" : ", especially under criteria 1.4.3, 1.4.6 and 1.4.11.",
"about-contrasts-title": "Accessible and Readable Color Contrasts",
"about-contrasts" : "The contrast between two colors, according to WCAG, can be described as a decimal between 1 and 21, so-called contrast value. The value is the same for the same pair of colors and is thus independent of which color is in the foreground or background.",
"about-wcag-list-heading" : "Four categories of color contrasts defined by WCAG:",
"about-wcag-aaa" : "Is achieved if the contrast value for color of regular-sized text and background color is greater than 7. For large text, the contrast value must be at least 4.5.",
"about-wcag-aa" : "Is achieved for regular text size if the contrast value is greater than 4.5. For large text, the contrast value must be at least 3.",
"about-wcag-nontext-aa" : "Large text and graphical elements that are not text must have a contrast value greater than 3.",
"about-wcag-low" : "Contrast value below 3 is too poor, also for large text and elements that are not text. Must be avoided.",
"contrast-section-title": "Contrasts for your palette",
"get-started-section-title": "Get started",
"get-started-description": "Below you will find a selection of predefined example palettes that you can use as a starting point. Otherwise, you will find different functionality under each tab, so here you should explore which functions are most useful for you. In the \"Your palette\" area, you can add and remove single colors. You change a color by clicking on the color or by entering the color's hex code directly.",
"default-palettes-description-1": "The examples are inspired by",
"default-palettes-description-2": "and",
"default-palettes-description-3": ".",
"test-section-title": "Contrast examples",
"test-section-explanation": "You can see what your color combinations might look like in practice on a webpage or any other graphical user interface..",
"contrast-table-title": "Display of selected color combinations with contrast value in a matrix",
"contrast-table-radiobutton-title": "Choose a display for the table",
"contrast-table-example": "Abc 123",
"contrast-table-empty": "The table is empty. Press the button with the plus sign under \"Your palette\" to add a color. You need at least 2 colors for contrasts to be calculated.",
"recommendation-section-title": "Recommendations for color combinations",
"recommendation-explanation": "Based on your palette, the color combinations below are recommended, divided according to the appropriate WCAG level.",
"wcag-section-title": "Web Content Accessibility Guidelines (WCAG)",
"my-colors-heading": "Your palette",
"my-colors-empty": "The palette is empty. Press the button with the plus sign to add a color.",
"change-color": "Change color",
"input-delete": "Remove color",
"add-color": "Add color code",
"clear-palette": "Empty the palette",
"contrast-description": "You can see contrast values and WCAG levels for all color combinations in your palette on this page. The AA and AAA labels indicate excellent or good/decent contrasts respecitvely. No label indicates poor contrasts. You can choose whether you want to see WCAG levels for text or non-text.",
"contrast-summary-heading": "combinations",
"contrast-summary-aaa": "Excellent contrast for text (level AAA)",
"contrast-summary-aa": "Good / decent contrast for text (level AA)",
"contrast-summary-nontext-aa": "Decent contrast for non-text (level AA)",
"contrast-summary-low": "Poor contrast",
"table-switch": "Switch view: ",
"view-wcag-level": "Show WCAG level for",
"view-wcag-level-text": "text",
"view-wcag-level-non-text": "non-text",
"mockup-title": "This is what the colors look like",
"mockup-text-small": "See how your color choices affect readability and design! ",
"mockup-form-title": "Checkbox question",
"mockup-form-statement1": "I am cool",
"mockup-form-statement2": "I am nice",
"mockup-footer-text": "I am a footer",
"mockup-textbox-header": "Test the colors in a text box!",
"mockup-textbox-maintext": "You can change colors to the left to see other possible combinations from the palette.",
"change-color-menu-direction": "Change location of color menu",
"tab-colblind-title-long": "Simulation of color vision deficiency",
"tab-colblind-fieldset-title": "Types of color vision deficiency",
"tab-colblind-title-description-1": "Color Vision Deficiency or Color Blindness is a variation in color vision characterized by not being able to differentiate between certain colors, or having challenges in recognizing colors in the environment. About 1 in 10 men have some form of color vision deficiency, while fewer than 1% of women experience color vision deficiency. Being colorblind does not mean that one sees the world in gray. Most people with color vision deficiency enjoy colors, but the range of perceived colors is somewhat reduced compared to a person with \"normal\" vision.",
"tab-colblind-title-description-2": "Youan simulate how someone with color vision deficiency experiences colors compared to a person with \"normal\" color vision. This requires at least 2 colors in the palette.",
"tab-colblind-reference": "The tool uses the algorithm developed in this article: Brettel, H., Viénot, F., & Mollon, J. D. (1997). Computerized simulation of color appearance for dichromats. Journal of the Optical Society of America. A, Optics, Image Science, and Vision, 14(10), 2647–2655.",
"tab-colblind-reference-link": "https://doi.org/10.1364/josaa.14.002647",
"ok": "ok",
"cancel": "cancel",
"about-tab-title": "About",
"get-started-tab-title": "Get Started",
"get-started-tab-description": "Here you can choose from ready-made color palettes.",
"contrast-tab-title": "Contrasts",
"contrast-tab-description": "Calculation of contrast values for all color combinations in your color palette.",
"testing-tab-title": "Examples",
"testing-tab-description": "An area to try out the selected colors on typical elements in a graphical user interface.",
"recommendation-tab-title": "Recommendations",
"recommendation-tab-description": "Here you will get recommendations for which color combinations are suitable or not suitable according to WCAG.",
"wcag-tab-title": "About WCAG",
"wcag-tab-description": "Here you can learn more about WCAG and color contrasts.",
"coldef-tab-title": "Col.Blind.",
"coldef-tab-description": "Simulation of color vision deficiency with selected color palette.",
"default-palettes-legend": "Palette examples",
"no-elements": "No recommendations because you have not selected any colors yet.",
"recommendation-no-colors": "You have not selected any colors yet. Press the button with the plus sign under \"Your palette\" to add a color. You need at least 2 colors for recommendations to be calculated.",
"test-area-empty": "No examples yet. Press the button with the plus sign under \"Your palette\" to add a color. You need at least 2 colors for the examples to be shown.",
"prefs-title": "Settings",
"prefs-description": "Here you can change your settings.",
"prefs-language-selected": "Selected language",
"prefs-language": "Language",
"skip-link": "Go to main content"
}
Loading

0 comments on commit e6e4df9

Please sign in to comment.